Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   обход дерева DOM (https://javascript.ru/forum/events/29754-obkhod-dereva-dom.html)

Nickolas 10.07.2012 01:06

обход дерева DOM
 
Друзья, нужна рекурсивная функция обхода DOM дерева, можно с использованием jquery. желательно с комментариями, чтобы можно было разобраться. заранее спасибо.

devote 10.07.2012 01:13

что значит рекурсивная? для каких целей? что бы обойти все элементы в DOM дереве, достаточно просто сделать:
var elems = document.getElementsByTagName('*');
for( var elem, i = 0; elem = elems[ i++ ]; ) {
    // some code
}

Aetae 10.07.2012 01:47

Мало ли зачем? Например нужны текстовые ноды.
Простейший вариант:
(function rec(el){
  var childs = el.childNodes, i = childs.length;
  while(i--) if( el.nodeType === 1 ) rec( childs[i] );
}(document.body))

Dim@ 10.07.2012 10:00

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
 }
}

Gvozd 10.07.2012 11:47

Цитата:

Сообщение от Dim@
непонятно зачем нужна рекурсия?

В IE8 ваш пример не работает

Aetae 10.07.2012 11:51

IE9+

Dim@ 10.07.2012 13:29

Gvozd,
ясно я просто на линуксе в FF сижу и тестить в браузерах не могу :)

cyber 10.07.2012 19:00

а как насчет замыканий типа
var next = document.body.firstChild;
function closers(){
 
next = next.nextSibling;
if(next !== null)setTimeout(closers);
}

писал в браузере если не будет работать скажите

Dim@ 10.07.2012 21:14

cyber,
работать то работает, только нельзя так проходит документ (он не делается плоским, а NodeInterator делает + структура HTML документов почти всегда имеет древоидное строение)

cyber 10.07.2012 21:52

ну это было показано для примера (не совсем удачный пример), вот полная рекурсия
<!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, время: 13:15.