Using array methods with NodeLists in vanilla JS
Quick reminder: there’s only two days left to get early bird discounting on the next session of the Vanilla JS Academy running in May. Use the code EarlyBird
at checkout to save 40%.
The querySelectorAll()
method is awesome, and makes it really easy to find all matching elements. And modern array methods like map()
and filter()
are super powerful.
Unfortunately, querySelectorAll()
returns a NodeList, not an array, so those methods won’t work with it.
// Get all wizards
var wizards = document.querySelector('[data-wizard]');
// Filter out Harry Potter
// NOTE: This WILL NOT work
var noHarry = wizards.filter(function (wizard) {
return wizard.getAttribute('[data-wizard]') !== 'Harry Potter';
});
There are two quick ways to fix that. Both involve converting your NodeList into an array.
Array.from()
The Array.from()
method converts an array-like object into an actual array.
// Get all wizards as an array
var wizards = Array.from(document.querySelector('[data-wizard]'));
This works in all modern browsers, included Edge, but not IE. You can fix that with a polyfill.
Array.prototype.slice.call()
If you don’t want to use a polyfill, you can use the call()
method to apply the Array.slice()
method—which creates a new array from an existing one—to a non-array.
// Get all wizards as an array
var wizards = Array.prototype.slice.call(document.querySelector('[data-wizard]'));
This works back to at least IE6.