Skip to main content Accessibility Feedback

Looping through NodeLists with ES6

Yesterday, we looked at how to loop through arrays with ES6. Today, we’re going to look at how to do the same thing with NodeLists.

NodeLists, if you’re not familiar, are array-like lists of nodes. This is what you get back when you use querySelectorAll().

Even though they look just like arrays, they’re not, so you can’t use array-specific methods on them (which is absurd and confusing).

The Old Way #

The traditional way of looping through NodeLists is the same as looping through arrays: with a for loop.

var elems = document.querySelectorAll('.some-selector');

for (var i = 0; i < elems.length; i++) {
    console.log(i); // index
    console.log(elems[i]); // value
}

The ES6 Way #

Fortunately, just like with arrays, there’s a forEach() method for NodeLists.

var elems = document.querySelectorAll('.some-selector');

elems.forEach(function (elem, index) {
    console.log(index); // index
    console.log(elem); // value
});

Unlike Array.forEach(), NodeList.forEach() has pretty terrible browser support.

A simple polyfill adds support back to IE9. Unfortunately, this one isn’t (yet) supported by polyfill.io, so even if you use the service you’ll need to add it manually to your code.

On Monday, we’ll look at how to loop through objects.


🔥 Hot off the press! I just launched a new pocket guide. Learn about ES6 arrow functions, let and const, function hoisting, and more.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips