javascript - 如何进行 DOM 的有序遍历？

Question

我发现了这个可笑的技术文档：

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

但没有看到它与编写实际的 JavaScript 代码有何关系。

我想我可以使用基本的 DOM 方法和属性，比如eachChild()and.children来进行遍历，但我不确定最好的策略是什么？

Answer 1

一旦你得到根节点，你只需要firstChild和nextSibling. 这是 Douglas Crockford 的功能，来自他的书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);
});

Answer 2

这是使用以下方法执行此操作的一种方法document.createNodeIterator：

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