Converting a Node List to an Array
querySelectorAll method returns an array-like object called a node list. These data structures are referred to as “Array-like”, because they appear as an array, but can not be used with array methods like
forEach. Here’s a quick, safe, and reusable way to convert a node list into an array of DOM elements:
const nodelist = document.querySelectorAll('div'); const nodelistToArray = Array.apply(null, nodelist); //later on .. nodelistToArray.forEach(...); nodelistToArray.map(...); nodelistToArray.slice(...); //etc...
apply method is used to pass an array of arguments to a function with a given
this value. MDN states that
apply will take an array-like object, which is exactly what
querySelectorAll returns. Since we don’t need to specify a value for
this in the context of the function, we pass in
0. The result is an actual array of DOM elements which contains all of the available array methods.
Alternatively you can use
Array.prototype.slice combined with
Function.prototype.apply passing the array-like object as the value of
const nodelist = document.querySelectorAll('div'); const nodelistToArray = Array.prototype.slice.call(nodelist); // or equivalently Array.prototype.slice.apply(nodelist); //later on .. nodelistToArray.forEach(...); nodelistToArray.map(...); nodelistToArray.slice(...); //etc...
Or if you are using ES2015 you can use the spread operator
const nodelist = [...document.querySelectorAll('div')]; // returns a real array //later on .. nodelist.forEach(...); nodelist.map(...); nodelist.slice(...); //etc...
Use the 100 answers in this short book to boost your confidence and skills to ace the interviews at your favorite companies like Twitter, Google and Netflix.GET THE BOOK NOW
A short book with 100 answers designed to boost your knowledge and help you ace the technical interview within a few days.GET THE BOOK NOW