如何遍历页面上的所有 DOM 元素？

javascript dom

2022-08-30 01:13:44

我正在尝试遍历页面上的所有元素，因此我想检查此页面上存在的每个元素是否存在特殊类。

那么，我该如何说我想检查每个元素呢？

答案 1

您可以将 a 传递给 getElementsByTagName（），以便它将返回页面中的所有元素：*

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here
}

请注意，您可以使用 querySelectorAll（）（如果可用）（IE9+，IE8 中的 CSS）来查找具有特定类的元素。

if (document.querySelectorAll)
    var clsElements = document.querySelectorAll(".mySpeshalClass");
else
    // loop through all elements instead

这肯定会加快现代浏览器的速度。

浏览器现在支持 NodeList 上的 foreach。这意味着您可以直接循环元素，而不是编写自己的 for 循环。

document.querySelectorAll('*').forEach(function(node) {
    // Do whatever you want with the node object.
});

性能说明 - 使用特定选择器，尽最大努力确定所需内容的范围。通用选择器可以根据页面的复杂程度返回大量节点。另外，考虑使用而不是当你不关心孩子的时候。document.body.querySelectorAlldocument.querySelectorAll<head>

答案 2

正在寻找相同的。嗯，不完全是。我只想列出所有DOM节点。

var currentNode,
    ni = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT);

while(currentNode = ni.nextNode()) {
    console.log(currentNode.nodeName);
}

要获取具有特定类的元素，我们可以使用过滤器函数。

var currentNode,
    ni = document.createNodeIterator(
                     document.documentElement, 
                     NodeFilter.SHOW_ELEMENT,
                     function(node){
                         return node.classList.contains('toggleable') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
                     }
         );

while(currentNode = ni.nextNode()) {
    console.log(currentNode.nodeName);
}

在MDN上找到解决方案