代码之家 › 专栏 › 技术社区 › Florian Müller

Javascript:如何遍历页面上的所有DOM元素?

dom javascript

129

Florian Müller · 技术社区 · 14 年前

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

那么,我该怎么说我想检查每个元素呢?

9 回复 | 直到 12 年前

231

Garbee 7 年前

你可以通过 * 到 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

这无疑会加快现代浏览器的速度。

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

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

业绩说明 -尽你最大的努力确定你要找的东西。通用选择器可以根据页面的复杂度返回许多节点。即使你真的需要检查别人看到的所有东西,那意味着你可以使用 'body *' 作为选择器 head 心满意足。

traditional 10 年前

也在寻找同样的东西。嗯,不完全是。我只想列出所有的DOM节点。

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

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

要获取具有特定类的元素,可以使用filter函数。

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

Community CDub 9 年前

下面是另一个关于如何循环遍历文档或元素的示例:

function getNodeList(elem){
var l=new Array(elem),c=1,ret=new Array();
//This first loop will loop until the count var is stable//
for(var r=0;r<c;r++){
    //This loop will loop thru the child element list//
    for(var z=0;z<l[r].childNodes.length;z++){

         //Push the element to the return array.
        ret.push(l[r].childNodes[z]);

        if(l[r].childNodes[z].childNodes[0]){
            l.push(l[r].childNodes[z]);c++;
        }//IF           
    }//FOR
}//FOR
return ret;
}

damdeez 7 年前

一如既往,最好的解决方案是使用递归:

loop(document);
function loop(node){
    // do some thing with the node here
    var nodes = node.childNodes;
    for (var i = 0; i <nodes.length; i++){
        if(!nodes[i]){
            continue;
        }

        if(nodes[i].childNodes.length > 0){
            loop(nodes[i]);
        }
    }

与其他建议不同,此解决方案不要求您为所有节点创建数组,因此它对内存的影响更大。更重要的是,它发现了更多的结果。我不确定这些结果是什么,但是当在chrome上测试时,它发现比 document.getElementsByTagName("*");

Matas Vaitkevicius user3782709 9 年前

对于那些使用Jquery的用户

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

shareef 12 年前

从这个链接
javascript reference

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function findhead1()
{
    var tag, tags;
    // or you can use var allElem=document.all; and loop on it
    tags = "The tags in the page are:"
    for(i = 0; i < document.all.length; i++)
    {
        tag = document.all(i).tagName;
        tags = tags + "\r" + tag;
    }
    document.write(tags);
}

//  -->
</script>
</head>
<body onload="findhead1()">
<h1>Heading One</h1>
</body>
</html>

更新:编辑

自从我最后一次回答后,我找到了更简单的解决办法

function search(tableEvent)
    {
        clearResults()

        document.getElementById('loading').style.display = 'block';

        var params = 'formAction=SearchStocks';

        var elemArray = document.mainForm.elements;
        for (var i = 0; i < elemArray.length;i++)
        {
            var element = elemArray[i];

            var elementName= element.name;
            if(elementName=='formAction')
                continue;
            params += '&' + elementName+'='+ encodeURIComponent(element.value);

        }

        params += '&tableEvent=' + tableEvent;


        createXmlHttpObject();

        sendRequestPost(http_request,'Controller',false,params);

        prepareUpdateTableContents();//function js to handle the response out of scope for this question

    }

synaptikon 9 年前

安迪E回答得很好。

我要补充的是,如果您想选择某个特殊选择器中的所有子对象(这一需求最近发生在我身上),您可以将方法“getElementsByTagName()”应用于任何所需的DOM对象。

举个例子,我需要解析网页的“可视”部分,所以我做了这个

var visualDomElts = document.body.getElementsByTagName('*');

这永远不会考虑头部。

ashleedawg 5 年前

使用 *

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

-1

Jimish Gamit 9 年前

你可以试试 document.getElementsByClassName('special_class');