Форум

Nickolas · #1 (**permalink**) 10.07.2012, 01:06

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

devote · #2 (**permalink**) 10.07.2012, 01:13

что значит рекурсивная? для каких целей? что бы обойти все элементы в DOM дереве, достаточно просто сделать:

var elems = document.getElementsByTagName('*');
for( var elem, i = 0; elem = elems[ i++ ]; ) {
    // some code
}

Aetae · #3 (**permalink**) 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@ · #4 (**permalink**) 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 · #5 (**permalink**) 10.07.2012, 11:47

Сообщение от Dim@

непонятно зачем нужна рекурсия?

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

Aetae · #6 (**permalink**) 10.07.2012, 11:51

Dim@ · #7 (**permalink**) 10.07.2012, 13:29

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

cyber · #8 (**permalink**) 10.07.2012, 19:00

а как насчет замыканий типа

var next = document.body.firstChild;
function closers(){
 
next = next.nextSibling;
if(next !== null)setTimeout(closers);
}

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

Dim@ · #9 (**permalink**) 10.07.2012, 21:14

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

cyber · #10 (**permalink**) 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>

кстати делать полный перебор ДОМ дерева это плохо=)

Форум

Справочник

Discord чат

Курсы javascript