While working with vanilla JavaScript, it is often required to find a list of elements in the Document Object Model (DOM) and iterate over them. For example, finding all anchor tags with a specific CSS class and attaching a click event handler to them.

The querySelectorAll() method is the one which is commonly used for selecting all elements of a specific type. It returns a list of DOM elements that match the specified selectors. The returned list is not an array, but rather a NodeList object containing a collection of nodes:

// select all anchor tags
const anchors = document.querySelectorAll('a.open-article');

// TODO: iterate over `NodeList` elements and attach a click handler

There are many ways to loop through a NodeList object in JavaScript. Let us look at them.

forEach() Method

The simplest and easiest way to loop over the results returned by querySelectorAll() is by using the forEach() method. This function executes the given function once for each node in the NodeList.

Here is an example:

anchors.forEach(anchor => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});

for...of Loop

Another way to loop through a NodeList object is by using the ES6 for...of statement. It has a clean and concise syntax, and is supported by all modern browsers:

for (const anchor of anchors) {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

Modern browsers also support entries(), keys(), and values() methods on a NodeList object. These methods return an iterator allowing you to loop through all key-value pairs. The values are always Node objects:

// entries() can be replaced with keys() or values()
for (const anchor of anchors.entries()) {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

Simple for Loop

If you want to support the maximum number of browsers including Internet Explorer (IE), the good old for loop is the way to go:

for (let i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', () => {
        console.log('Link is clicked!');
    });
}

The above example uses ES6 arrow functions syntax. It won't work in IE and similar older browsers. So we have to use the ES5 function declaration syntax:

for (var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', function () {
        console.log('Link is clicked!');
    });
}

3rd-Party Libraries

If you are already using jQuery, there is no need to use any of the above methods:

$('a.open-article').on('click', () => {
    console.log('Link is clicked!');
});

In JavaScript frameworks like Angular, React, and Vue, you shouldn't use jQuery. Rather, use Lodash's _.forEach method:

_.forEach(anchors, (anchor, key) => {
    anchor.addEventListener('click', () => {
        console.log('Link is clicked!');
    });
});

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, Buy me a coffee (cost $5) .

Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.