如何进行 DOM 的有序遍历？ [关闭]答案

【问题标题】：How to do an in-order traversal of the DOM? [closed]如何进行 DOM 的有序遍历？ [关闭]
【发布时间】：2013-08-27 17:07:13
【问题描述】：

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

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

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

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

【问题讨论】：

depth first, pre-order traversal, which is equivalent to the order in which the start tags occur in the text representation of the document 有什么可笑的技术？
你想做什么？在现代浏览器中，有许多帮助 API 可用于查找具有特定品质的元素。
@Handy，DocumentTraversal 是一个提供文档排序迭代器的接口，可以通过浏览器提供的document 实例来实现。如果您的浏览器支持document.createNodeIterator() 和document.createTreeWalker()，那么您确实可以通过Javascript 访问该接口。
JavaScript 没有接口，在编程意义上...stackoverflow.com/questions/3710275/…
@Handy，该接口是您正在使用的 Javascript 实现使用的抽象设备。在 JS 方面，document 要么实现这些方法，要么不实现，你可以检查一下。

标签： javascript

【解决方案1】：

这是使用document.createNodeIterator 的一种方法：

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

【讨论】：

【解决方案2】：

获得根节点后，只需要firstChild 和nextSibling。这是 Douglas Crockford 的功能，来自他的书 JavaScript - The Good Parts，第 1 页。 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);
});

【讨论】：

这是一个很好的遍历 DOM 的例子：javascript.info/tutorial/traversing-dom
@Handy 对于浏览器供应商/实施提供商来说更是如此。无论如何，它记录了整个 DOM API 标准。 F.J 的答案基于那里提到的内容（createNodeIterator 函数）。