Javascript：如何循环浏览页面上的所有DOM元素？
我试图遍历页面上的所有元素，所以我想检查这个页面上存在的每个元素为一个特殊的类。
那么，我怎么说我想检查每个元素？
您可以传递一个*到getElementsByTagName()以便它将返回页面中的所有元素：
var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++) { // Do something with the element here }
请注意，如果可用（IE9 +，IE8中的CSS querySelectorAll() ，则可以使用querySelectorAll()来查找具有特定类的元素。
if (document.querySelectorAll) var clsElements = document.querySelectorAll(".mySpeshalClass"); else // loop through all elements instead
这肯定会加速现代浏览器的问题。
正在寻找相同的。 那么，不完全是。 我只想列出所有的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上find解决scheme
以下是关于如何遍历文档或元素的另一个示例：
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; }
对于那些正在使用Jquery的人
$("*").each(function(i,e){console.log(i+' '+e)});
一如既往，最好的解决scheme是使用recursion：
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]); } }
不同于其他的build议，这个解决scheme不需要你为所有的点头创build一个数组，所以它在内存上更加明亮。 而最重要的是它find更多的结果。 我不确定这些结果是什么，但是当在chrome上testing时，与document.getElementsByTagName("*");相比，它find了大约50％的节点document.getElementsByTagName("*");
从这个链接
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>
更新：编辑
自从我上次的回答我发现更好的简单的解决scheme
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 }
Andy E.给出了一个很好的答案。
我想补充一下，如果你觉得在一些特殊的select器中select了所有的子元素（这个需求最近发生在我身上），你可以在你想要的任何DOM对象上应用“getElementsByTagName（）”方法。
举个例子，我只需要parsing网页的“可视化”部分，所以我只是做了这个
var visualDomElts = document.body.getElementsByTagName('*');
这将永远不考虑头部分。
使用*
var allElem = document.getElementsByTagName("*"); for (var i = 0; i < allElem.lenght; i++) { // Do something with all element here }
你可以用document.getElementsByClassName('special_class');
