обход дерева DOM
Друзья, нужна рекурсивная функция обхода DOM дерева, можно с использованием jquery. желательно с комментариями, чтобы можно было разобраться. заранее спасибо.
|
что значит рекурсивная? для каких целей? что бы обойти все элементы в DOM дереве, достаточно просто сделать:
var elems = document.getElementsByTagName('*');
for( var elem, i = 0; elem = elems[ i++ ]; ) {
// some code
}
|
Мало ли зачем? Например нужны текстовые ноды.
Простейший вариант:
(function rec(el){
var childs = el.childNodes, i = childs.length;
while(i--) if( el.nodeType === 1 ) rec( childs[i] );
}(document.body))
|
Aetae,
непонятно зачем нужна рекурсия?
if (document.createNodeIterator && document.createTreeWalker){ //Traversal API
texts = document.createNodeIterator( //создание NodeItertor
document,//обход всего документа
NodeFilter.SHOW_TEXT,//узлы текст
null,//нету функции фильтра
false//в HTML не используется
);
var text;
while((text = texts.nextNode()) != null){
//действия с узлами text
}
}
|
Цитата:
|
IE9+
|
Gvozd,
ясно я просто на линуксе в FF сижу и тестить в браузерах не могу :) |
а как насчет замыканий типа
var next = document.body.firstChild;
function closers(){
next = next.nextSibling;
if(next !== null)setTimeout(closers);
}
писал в браузере если не будет работать скажите |
cyber,
работать то работает, только нельзя так проходит документ (он не делается плоским, а NodeInterator делает + структура HTML документов почти всегда имеет древоидное строение) |
ну это было показано для примера (не совсем удачный пример), вот полная рекурсия
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id ='1'>
<div id = '2'>
<div id = '3'></div>
</div>
</div>
<div id = 'result'></div>
<script>
var elemS = document.getElementsByTagName('*');
var res = document.getElementById('result');
var i = 0,stop = elemS.length;
(function closers(){
result.innerHTML +=', '+ elemS[i].tagName;
i++;
if(i < stop)setTimeout(closers,0);
}());
</script>
</body>
</html>
кстати делать полный перебор ДОМ дерева это плохо=) |
| Часовой пояс GMT +3, время: 12:04. |