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.