Loop Over querySelectorAll Matches

Let’s look at some options for iterating over a NodeList, as you get back from running a document.querySelectorAll.

We’ve written an updated article about this: A Bunch of Options for Looping Over querySelectorAll NodeLists.

Not all browsers support forEach on NodeLists, but for those that do:

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    console.log("forEach worked");
  });
});

Here’s a tricky way to get around that with a bit deeper browser support.

var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

Fair warning, Todd Motto explains why this method is a rather hacky, detailing over 10 problems with it.

You could also use a classic for loop:

var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Todd’s suggestion is to make your own method:

// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

// Usage:
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll('li');
forEach(myNodeList, function (index, value) {
  console.log(index, value); // passes index + value back!
});

You can also spread the list yourself, which then would give you access to other array methods while you’re at it.

[...buttons].forEach((button) => {
  button.addEventListener('click', () => {
    console.log("spread forEach worked");
  });
});

There are also for..of loops. Firefox was the first to support this but support has gotten pretty good:

for (const button of buttons) {
  button.addEventListener('click', () => {
    console.log("for .. of worked");
  });
}

This is pretty intense (probably dangerous and not recommended) but you could make NodeList have the same forEach function as Array does, then use it.

NodeList.prototype.forEach = Array.prototype.forEach;

var divs = document.querySelectorAll('div').forEach(function(el) {
  el.style.color = "orange";
})

There is a bit more information in the MDN article.