Loop through all DOM elements using JavaScript

# Loop through all DOM elements using JavaScript

To loop through all DOM elements:

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

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

loop through all dom elements using javascript

The code for this article is available on GitHub

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.

# Breaking out of the loop if a condition is met

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

index.js

Copied!
const allElements = document.getElementsByTagName('*');

for (const element of allElements) {
  console.log(element);

  if (element.textContent === 'Box 2') {
    break;
  }
}

break out of loop if condition is met

The code for this article is available on GitHub

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

# Iterating only over the elements contained in the `body` tag

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

index.js

Copied!
const allInBody = document.querySelectorAll('body > *');

for (const element of allInBody) {
  console.log(element);
}

iterating only over elements contained in body tag

The document.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 NodeList.forEach() method.

index.js

Copied!
const allInBody = document.querySelectorAll('body > *');

allInBody.forEach(element => {
  console.log(element);
});

The code for this article is available on GitHub

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 takes one or more comma-separated selectors.

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

index.js

Copied!
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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Loop through all DOM elements using JavaScript