Обход child nodes (потомков) определнного элемента в Javascript
Речь о том как корректно обойти элементы потомки DOM для данного элемента, простите за тафтологию 
В общем конструкция следующая:
-
var object = document.getElementById('el');
-
for (var childItem in object.childNodes) {
-
if (object.childNodes[childItem].nodeType == 1)
-
object.childNodes[childItem].style.color = '#FF0000';
-
}
В данном примере мы берем некоторый элемент с id = 'el' и проходим по массиву его потомков (childNodes), при этом проверяем nodeType потомка, чтобы он был элементом страницы и если так, то окрашиваем его в КРАСНЫЙ цвет.
В принципе на базе этой конструкции можно организовать рекурсивный обход дерева всех потомков заданного элемента, если конечно возникнет такая необходимость, но пока я представляю только упрощенный вариант.
Здесь следует обратить внимание на проверку свойства nodeType == 1, дело в том что без этой проверки в обработку попадут и разрывы строк, т.е. символы "\n", которые тоже воспинимаются как ноды. Т.е. например конструкция вида:
и конструкция:
без этой проверки обрабатывались бы по разному, т.е. в первом случае мы бы получили ошибку, поскольку потомок " \n " не имеет свойства style
Разместить у себя на ресурсе или в ЖЖ:
На любом форуме в своем сообщении:
20 января, 2008 в 5:41
так быстрее и меньше кода
var object = document.getElementById('el').getElementsByTagName('*');
for(var i=0;object;i++){
object.style.color = '#FF0000';
}
....
16 апреля, 2008 в 8:16
5 баллов.
Примерчик пригодился, спасибо.
Sun, getElementsByTagName не поддерживает ИЕ, смысл его использовать?
7 декабря, 2009 в 11:18
Спасибо, полезно.
Но как по мне, лучше через обычный цыкл сделать.
27 марта, 2010 в 4:16
К сожалению заметил, что данная конструкция в Opera выполняется некорректно (цикл for проходится два раза), никто с таким не встречался? Где-то всё же закралась моя ошибка или это ошибка браузера (проверял в 9.20, 9.50, 10.20), замечу, что в остальных браузерах всё выполняется верно.
var object = document.getElementById('el');
for (var childItem in object.childNodes) {
}
28 марта, 2010 в 9:28
Быть может кому пригодится, решил проблему немного изменив цикл
var object=document.getElementById('el');
for(var i=0;i<object.childNodes.length;i++) {
if (object.childNodes.nodeType == 1) {
// тут что-либо делаем
}
}