Javascript: How to loop through ALL DOM elements on a page?

ID : 20270

viewed : 7

Tags : javascriptdomjavascript

Top 5 Answer for Javascript: How to loop through ALL DOM elements on a page?

vote vote

100

You can pass a * to getElementsByTagName() so that it will return all elements in a page:

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

Note that you could use querySelectorAll(), if it's available (IE9+, CSS in IE8), to just find elements with a particular class.

if (document.querySelectorAll)     var clsElements = document.querySelectorAll(".mySpeshalClass"); else     // loop through all elements instead 

This would certainly speed up matters for modern browsers.


Browsers now support foreach on NodeList. This means you can directly loop the elements instead of writing your own for loop.

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

Performance note - Do your best to scope what you're looking for by using a specific selector. A universal selector can return lots of nodes depending on the complexity of the page. Also, consider using document.body.querySelectorAll instead of document.querySelectorAll when you don’t care about <head> children.

vote vote

80

Was looking for same. Well, not exactly. I only wanted to list all DOM Nodes.

var currentNode,     ni = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT);  while(currentNode = ni.nextNode()) {     console.log(currentNode.nodeName); } 

To get elements with a specific class, we can use filter function.

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

Found solution on MDN

vote vote

71

As always the best solution is to use 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]);         }     } } 

Unlike other suggestions, this solution does not require you to create an array for all the nodes, so its more light on the memory. More importantly, it finds more results. I am not sure what those results are, but when testing on chrome it finds about 50% more nodes compared to document.getElementsByTagName("*");

vote vote

61

Here is another example on how you can loop through a document or an element:

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

51

For those who are using Jquery

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

Top 3 video Explaining Javascript: How to loop through ALL DOM elements on a page?

Related QUESTION?