There are a lot of ways to loop over a NodeList Object (List of DOM elements) that is returned by a querySelectorAll method! In this post, I want to share 5 ways.

Let’s start by defining a piece of HTML and a const variable that is searching for multiple elements.

HTML

<div class="container" id="myContainer">
   <div class="content-box">
      <h2>Fake image</h2>
   </div>
   <div class="content-box">
      <h2>Fake image</h2>
   </div>
   <div class="content-box">
      <h2>Fake image</h2>
   </div>
   <div class="content-box">
      <h2>Fake image</h2>
   </div>
</div>

JavaScript

const ContentBox = document.querySelectorAll(".content-box");

So now we are ready to find out which 5 ways we can use to loop over this cool NodeList Object that is returned by the querySelectorAll method.

If a method gives an option of a callback, then I will use the “Arrow function” for that.

1. For-loop

The most know function to loop over everything is the good old For-loop. This is maybe not the prettiest code but definitely high performed.

So if you need to support older browsers like IE11 or lower and you don’t use a compiler like Babel, than this is your best weapon.

Support: every browser!

const ContentBox = document.querySelectorAll(".content-box");
	for (var i = 0; i < ContentBox.length; i++) {
	    console.log('Content Box: ', ContentBox[i]);
	}

2. For..of

I would call the For..of loop an extension on the normal For-loop. This is because this function can loop over iterable objects (including String, Array, Array-like arguments, NodeList Objects, TypedArray, Map and Set).

If you need to support old browsers then you definitely need a compiler like Babel. But if you only need to support the modern browsers For..of would be my weapon of choice!

Support: All modern browsers! Not supported in IE11 or lower.

const ContentBox = document.querySelectorAll(".content-box");
	for (const ContentBox1 of ContentBox) {
	    console.log('Content Box: ', ContentBox1);
	}

3. For..of entries, keys, values

In a previous way, we just used the NodeList to loop over in the For..of loop. But the NodeList has also a few more methods to use in this loop.

The entries(), keys() and values() methods return a iterator. An iterator is a new iterable protocol in the ES2015 specification.

In JavaScript, some types of data (Array or Map) have built-in functionality to loop over.

An object doesn’t have built-in functionality to loop over it. Via the iterator protocol, we can loop over data types that don’t default support for that.

entries

Each item in this loop is an Array with first the key and then the element. This looks maybe a bit funny but is expected behavior.

const ContentBox = document.querySelectorAll(".content-box");
	for (const ContentBox1 of ContentBox.entries()) {
	    console.log('Content Box: ', ContentBox1);
	};

values

Where the entries method gives us an Array of the key and value. Each item in this loop is an element, in other words, the value as the method name tells us.

const ContentBox = document.querySelectorAll(".content-box");
	for (const ContentBox1 of ContentBox.values()) {
	    console.log('Content Box: ', ContentBox1);
	};

keys

Just like the values method gives us the value of each item in the NodeList, the keys method gives us the keys from the NodeList Object.

const ContentBox = document.querySelectorAll(".content-box");
	for (const ContentBox1 of ContentBox.keys()) {
	    console.log('Content Box: ', ContentBox1);
	};

4. forEach

Here comes a cool method that I was not aware of ????. Just like the Array method forEach, a NodeList Object has its own forEach method.

The most important note on this is that it’s only supported in modern browsers. For support in older browsers, you definitely need a compiler.

Support: All modern browsers! Not supported in IE11 or lower.

const ContentBox = document.querySelectorAll(".content-box");
	ContentBox.forEach(ContentBox1 => {
	    console.log('Content Box: ', ContentBox1);
	});

[].forEach.call(
document.querySelectorAll(".content-box"),
    function (el) {
        console.log(el);
    }
);

5. (ES2015) Spread syntax with forEach

In the ES2015 we have the Spread syntax for Arrays. With this syntax, you can do a lot of cool stuff! One of those things is, turn a NodeList Object into an Array and use the Array forEach method on it.

For support in older browsers, you definitely need a compiler, because the support is not completely implemented in all the modern browsers.

Support: Almost all modern browsers! Not supported in IE11 or lower.

const ContentBox = document.querySelectorAll(".content-box");
	[...ContentBox].forEach(ContentBox1 => {
			console.dir(ContentBox1);
	});

Final thoughts

If you learned something or have other ways to loop over a NodeList Object from the querySelectorAll, please comment below.

Recommended reading:

1. 5 Most Reliable Digital Marketing Strategies For Small Business
2. 10 Easy-to-Use Tools To Improve SEO in WordPress
3. How to Create a Blog in WordPress (Step by Step)
4. Create A Custom Admin Menu With Admin Page WordPress
5. 7 WordPress Functions.php File Tips & Tricks
6. Almost A Million WordPress Sites Targeted In Extensive Attacks
7. Create a Custom Post Type in WordPress
8. WordPress .htaccess file Tips & Tricks