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.