How can I loop through ALL DOM elements on a page?

by

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.

More Related Contents:

  1. Parse an HTML string with JS
  2. jQuery document.createElement equivalent?
  3. Browser detection versus feature detection
  4. When should I use jQuery’s document.ready function?
  5. How can I count text lines inside an DOM element? Can I?
  6. querySelector, wildcard element match?
  7. Is it possible to run an .exe or .bat file on ‘onclick’ in HTML
  8. Find the closest ancestor element that has a specific class
  9. Replace HTML page with contents retrieved via AJAX
  10. How can I highlight the text of the DOM Range object?
  11. JavaScript accessing inner DOM of SVG
  12. Why doesn’t nodelist have forEach?
  13. Pass mouse events through absolutely-positioned element
  14. getAttribute() versus Element object properties?
  15. How to check if element has any children in Javascript?
  16. How to find a parent with a known class in jQuery?
  17. jQuery count child elements
  18. Why aren’t some technically serializable input properties serializable?
  19. Forcing a DOM refresh in Internet explorer after javascript dom manipulation
  20. How to give a Blob uploaded as FormData a file name?
  21. Add an element to the DOM with JavaScript
  22. cloning javascript event object
  23. What is the difference between Document and document in JavaScript?
  24. How to get the title of HTML page with JavaScript?
  25. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  26. Retrieving value from with multiple option in React
  27. document.createElement(‘script’)… adding two scripts with one callback
  28. How browser executes Javascript and renders asynchronously
  29. Can I add arbitrary properties to DOM objects?
  30. Is there any way to find an element in a documentFragment?

Leave a Comment