Как выполнить обход DOM в порядке?

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

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-Document

, но не видел, как это связано с написания фактического кода JavaScript.

Я бы предположил, что я мог бы использовать базовые методы и свойства DOM, такие как и .children, чтобы сделать обход, но я не уверен, что такое лучшая стратегия?

источник

2013-08-24 Handy

Что смешного техническая с 'глубиной первых, предзаказ обходом, что эквивалентно порядка, в котором начало теги появляются в текстовом представлении документа? –

Что вы хотите сделать? В современных браузерах есть много вспомогательных API, чтобы находить элементы с определенными качествами. – Pointy

@Handy, 'DocumentTraversal' - это интерфейс, который предоставляет итераторы, упорядоченные по документам, и может быть реализован с помощью экземпляра' document', который предоставляет ваш браузер. Если ваш браузер поддерживает [document.createNodeIterator()] (https://developer.mozilla.org/en-US/docs/Web/API/Document.createNodeIterator) и [document.createTreeWalker()] (https: // разработчик .mozilla.org/en-US/docs/Web/API/document.createTreeWalker), тогда вы действительно сможете получить доступ к этому интерфейсу из Javascript. –

Как только вы получите корневой узел, вам понадобятся только firstChild и nextSibling. Это функция Дугласа Крокфорда для этого, из его книги JavaScript - The Good Parts, p. 35:

var walk_the_DOM = function walk(node, func) { 
    func(node); 
    node = node.firstChild; 
    while(node) { 
     walk(node, func); 
     node = node.nextSibling; 
    } 
}

Это означало для обхода DOM из данного узла, и запустить обратный вызов на каждом узле найден. Например:

walk_the_DOM(document.body, function(node) { 
    console.log(node); 
});

источник

2013-08-24 21:35:10 bfavaretto

Это дает вам хороший пример прохождения DOM: http://javascript.info/tutorial/traversing-dom – Trendy

@Handy Это больше для поставщиков браузеров/поставщиков решений. В любом случае он документирует все стандарты API DOM. Ответ Ф.J основывается на упомянутых там материалах (функция 'createNodeIterator'). – bfavaretto

Вот один из способов сделать это с помощью document.createNodeIterator:

var nodeIterator = document.createNodeIterator(document.body); 
var currentNode; 
while (currentNode = nodeIterator.nextNode()) { 
    console.log(currentNode); 
}

источник

2013-08-24 21:38:07

Как выполнить обход DOM в порядке?

ответ

Смежные вопросы