JavaScript loop querySelectorAll results

Let's talk about JavaScript NodeLists. Node lists are the results of a querySelectorAll() query.

They are not an array, but they look and behave similarly. It can be tricky looping over their items and there are multiple ways to *loop through a NodeList.

This is how the selector looks like:

const items = document.querySelectorAll('li');
console.log(items);

And the result of the JavaScript querySelectorAll is a NodeList object:

1. Basic for loop permalink

To loop through a result from querySelectorAll you can use the basic for loop. It is by far the best-supported method. It's well supported on all browsers and recommended if you need to support older browsers.

See the code here:

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function () {
    console.log(`Text = ${items[i].innerText}`);
  });
}

It's just not the most modern or visually appealing looping method.

2. for...of loop permalink

We can also use the for...of loop on a NodeList.

for (const item of items) {
  item.addEventListener('click', () => {
    console.log(`2: Text = ${item.innerText}`);
  });
}

The for of loop is supported by all modern browsers and works pretty well on a list of nodes.

3. forEach loop permalink

My all-time favorite loop to use with querySelectorAll is the forEach loop.

It's the easiest method to use with NodeLists but will only work in modern browsers.

items.forEach((item) => {
  item.addEventListener('click', () => {
    console.log(`3: Text = ${item.innerText}`);
  });
});

This method can be extended by converting the NodeList to an array before.

[].forEach.call(items, function (item) {
  item.addEventListener('click', function () {
    console.log(`3.1: Text = ${item.innerText}`);
  });
});

Or, we can use the spread operator to convert the list into an array:

[...items].forEach((item) => {
  item.addEventListener('click', () => {
    console.log(`3.2: Text = ${item.innerText}`);
  });
});

There you go: Three examples (+ iterations) of how to loop over the querySelectorAll result in Javascript.

See the Code Examples in this Codepen permalink

You can also have a play around with this Codepen.

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter