Question

我已阅读以下非常好的文章： Difference between Node object and Element object? 清除节点对象和元素对象之间的区别。我已经明白了

元素对象是节点对象的子集。

因此，在此之后我会遇到以下问题：我可以通过哪种方式遍历所有 节点对象 ？通过使用document.getElementsByTagName('*')，我认为我获得了所有 元素对象 ，因为它们的.nodeType属性都具有值1。我是对的，如果是的话，我怎样才能将所有这些非元素的节点包括在我的结果中？

谢谢

Answer 1

我不相信任何标准的DOM函数会在整个文档中返回每个 Node（而不是Element）。

您可能必须使用递归DOM遍历来查找所有这些内容：

function getAllNodes(parent, nodes) {
    parent = parent || document;
    nodes = nodes || [];

    var child = parent.firstChild;
    while (child) {
        nodes.push(child);
        if (child.hasChildNodes) {
            getAllNodes(child, nodes);
        }
        child = child.nextSibling;
    }
    return nodes;
}

如上所述，您只需撰写var nodes = getAllNodes()即可自动从文档根目录开始。

Answer 2

答案在你的问题中。您使用document.getElementsByTagName。让我为你重复一遍。得到的元素 ByTagName。

非元素节点没有标记名称，标识符或类似名称。指定它们的唯一方法是它们在文档结构中的位置。

您可以获取对Element的引用，然后浏览其childNodes，如已经建议的那样。

另一种方式是use an XPath，与CSS选择器不同，它能够直接指向任何节点，包括文本和注释节点。

document.evaluate("*", document.documentElement, null, XPathResult. UNORDERED_NODE_ITERATOR_TYPE)

迭代所有节点对象，而不仅仅是元素对象

2 个答案: