如何按顺序遍历DOM

How to do an in-order traversal of the DOM?

本文关键字：DOM 遍历 顺序 何按      更新时间：2023-09-26

我发现了这个荒谬的技术文档：

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

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

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

获得根节点后，只需要firstChild和nextSibling。这是Douglas Crockford的函数，来自他的书《JavaScript-好的部分》，第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);
});

这里有一种使用document.createNodeIterator:的方法

var nodeIterator = document.createNodeIterator(document.body);
var currentNode;
while (currentNode = nodeIterator.nextNode()) {
    console.log(currentNode);
}
相关文章：