A NodeList is an array-like object that presents a collection of DOM elements or more specifically nodes. It is very like an array, but you can not use the common array methods like
filter() on a
Take a look this guide to understand the difference between a
NodeList and an array.
Both NodeLists and arrays have their own prototypes, methods, and properties. You can easily convert a
NodeListto an array if you want to, but not the other way around.
In this article, we'll look at different ways to convert a
NodeList object to an array is by using the
// create a `NodeList` object const divs = document.querySelectorAll('div'); // convert `NodeList` to an array const divsArr = Array.from(divs);
The output of the above code is a normal
Array object containing all the nodes returned by the
Array.from() method was introduced in ES6 and creates a new, shallow-copied
Array object from the
NodeList object. Unfortunately, it only works in modern browsers. To support old browsers like IE, you need a polyfill.
Another way to create an
Array object from a
NodeList is by using the spread operator syntax (
// create a `NodeList` object const divs = document.querySelectorAll('div'); // convert `NodeList` to an array const divsArr = [...divs];
The ES6's spread operator is a concise, and cool way of converting a
Finally, the last way to convert a
NodeList to an
Array object is by using the
call() method to execute the
Array.prototype.slice() method on the
NodeList object as shown below:
// create a `NodeList` object const divs = document.querySelectorAll('div'); // convert `NodeList` to an array const divsArr = Array.prototype.slice.call(divs);
You can also use a concise form of the above method:
const divsArr = .slice.call(divs);
Array.prototype.slice.call() works well in all modern and old browsers including IE 6+. You should use this approach if you want to support the most number of browsers.
👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, ☕ Buy me a coffee (cost $5) .
Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.