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

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

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

当前回答

最好的解决方案是使用递归:

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%的节点;

2017-03-08 17:50:29

其他回答

从这个链接 javascript参考

<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

    }

2013-02-20 05:55:26

对于那些正在使用Jquery的人

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

2015-10-06 15:13:56

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

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

(感谢@George Reith的递归答案:将HTML映射到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);

}

2020-07-09 09:09:44

你可以试试 document.getElementsByClassName(“special_class”);

2010-11-23 13:24:17

使用*

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元素?

推荐文章

最新文章

标签