如何在页面上遍历所有DOM元素?

我试图在一个页面上循环所有元素，所以我想检查存在于这个页面上的一个特殊类的每个元素。

我怎么说我要检查每个元素呢?

当前回答

我也在找。嗯，不完全是。我只想列出所有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);
}

找到的解中数

2014-10-03 01:33:37

其他回答

你可以传递一个*给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. queryselectorall而不是document。当你不关心<head> children. querySelectorAll。

2010-11-23 13:15:44

对于那些正在使用Jquery的人

$("*").each(function(i,e){console.log(i+' '+e)});

2015-10-06 15:13:56

我觉得这真的很快

document.querySelectorAll('body,body *').forEach(function(e) {

2020-05-06 10:32:39

使用*

var allElem = document.getElementsByTagName("*");
for (var i = 0; i < allElem.length; i++) {
    // Do something with all element here
}

2017-07-31 13:30:35

我也在找。嗯，不完全是。我只想列出所有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);
}

找到的解中数

2014-10-03 01:33:37

如何在页面上遍历所有DOM元素?

推荐文章

最新文章

标签