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

时间：2010-11-23 13:13:13

标签： javascript dom

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

那么，我怎么说我想检查每个元素？

11 个答案:

答案 0 :(得分：206)

您可以将*传递给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内容。

答案 1 :(得分：27)

正在寻找相同的。好吧，不完全是。我只想列出所有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

答案 2 :(得分：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;
}

答案 3 :(得分：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("*");

相比，它发现节点多了50％

答案 4 :(得分：5)

对于那些使用Jquery的人

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

答案 5 :(得分：2)

来自此链接
        的 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>

<强> UPDATE：修改

自从我上次回答后，我找到了更简单的解决方案

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

    }

答案 6 :(得分：2)

Andy E.给出了一个很好的答案。

我想补充一点，如果你想选择一些特殊选择器中的所有子节点（最近我遇到这种情况），你可以在你想要的任何DOM对象上应用方法“getElementsByTagName（）”。

举个例子，我需要解析网页的“视觉”部分，所以我就这样做了

reloadGrid

这绝不会考虑到头部。

答案 7 :(得分：0)

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

答案 8 :(得分：0)

使用* 

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

答案 9 :(得分：0)

我认为这真的很快

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

答案 10 :(得分：0)

如果需要检查每个元素，可以使用var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++);获取所有元素，但这会导致检查或循环重复的元素或文本。

下面是一个递归实现，仅检查或循环所有DOM元素中的每个元素 一次 并追加：

（@ George Reith的递归答案在这里： Map HTML to JSON）

function mapDOMCheck(html_string, json) {
  treeObject = {}

  dom = new jsdom.JSDOM(html_string) // use jsdom because DOMParser does not provide client-side Window for element access
  document = dom.window.document
  element = document.querySelector('html')

  // Recurse and loop through DOM elements only once
  function treeHTML(element, object) {
    var nodeList = element.childNodes;

    if (nodeList != null) {
      if (nodeList.length) {
        object[element.nodeName] = []; // IMPT: empty [] array for parent node to push non-text recursivable elements (see below)

        for (var i = 0; i < nodeList.length; i++) {
          console.log("nodeName", nodeList[i].nodeName);

          if (nodeList[i].nodeType == 3) { // if child node is **final base-case** text node
            console.log("nodeValue", nodeList[i].nodeValue);
          } else { // else
            object[element.nodeName].push({}); // push {} into empty [] array where {} for recursivable elements
            treeHTML(nodeList[i], object[element.nodeName][object[element.nodeName].length - 1]);
          }
        }
      }
    }
  }

  treeHTML(element, treeObject);

}
相关问题
最新问题