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.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

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