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

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


当前回答

使用*

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

其他回答

使用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);

}

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

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;
}

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

安迪e给出了一个很好的回答。

我会补充,如果你觉得选择所有的子在一些特殊的选择器(这需要发生在我最近),你可以应用方法“getElementsByTagName()”对任何DOM对象你想要。

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

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

这绝对不会考虑到头部部分。

对于那些正在使用Jquery的人

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