Loop through all DOM elements using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

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.

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.