Loop through all DOM elements using JavaScript

avatar

Borislav Hadzhiev

Mon Jan 10 20222 min read

Loop through all DOM elements using JavaScript #

To loop through all DOM elements:

  1. Use the getElementsByTagName() method to get an HTMLCollection containing all DOM elements.
  2. Use a for...of loop to iterate over the collection.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const allElements = document.getElementsByTagName('*'); // โœ… Loop through all elements (including html, head, meta, scripts) for (const element of allElements) { console.log(element); } console.log('--------------------'); // โœ… Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); }

The document.getElementsByTagName method returns an HTMLCollection containing the elements with the provided tag name.

If the method is passed an asterisk as a parameter, it returns a collection containing all DOM elements.

We used a for...of loop to iterate over the collection.

Note that you can use the break keyword to break out of a for loop if certain condition is met.

index.js
const allElements = document.getElementsByTagName('*'); for (const element of allElements) { console.log(element); if (element.textContent === 'Box 2') { break; } }

The selector above contains all of the DOM elements, including the html element, the head element, etc.

If you only need to iterate over the elements contained in the body tag, use the document.querySelectorAll() method instead.

index.js
const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody) { console.log(element); }

The querySelectorAll method takes a string containing a CSS selector as a parameter and returns a NodeList containing the matching elements.

We used a for...of loop to iterate over the NodeList, however you can also use the forEach method.

index.js
const allInBody = document.querySelectorAll('body > *'); allInBody.forEach(element => { console.log(element); });

The function we passed to the forEach method gets called with each element in the NodeList.

Note that the break keyword is not supported when using the forEach method.

The querySelectorAll() method can passed one or more comma-separated selectors.

The following example selects all elements with classes my-class and your-class.

index.js
const elements = document.querySelectorAll( '.my-class, .your-class' ); elements.forEach(element => { console.log(element); });

You can pass as many comma-separated selectors to the method as necessary.

This might be a more efficient solution if you don't need to iterate over every single element in the DOM.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee