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

Iterate over all node objects not only element objects

本文关键字:对象 不仅仅是 元素 迭代 节点      更新时间:2023-09-26

我读了下面一篇非常好的文章:节点对象和元素对象的区别?以清除节点对象和元素对象之间的差异。我明白了

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

因此,在此之后,我遇到了以下查询:我可以通过哪种方式遍历所有节点对象?通过使用document.getElementsByTagName('*'),我认为我得到了所有的元素对象,因为它们的.nodeType属性都有值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(),它会自动从文档根目录开始。

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

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

您可以获取一个Element的引用,然后浏览它的childNodes,正如已经建议的那样。

另一种方法是使用XPath,它与CSS选择器不同,它能够直接指向任何Node,包括文本和注释节点。

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