How to convert NodeList to an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
When working with DOM manipulation, you often get a NodeList from methods like querySelectorAll(), but NodeLists lack many useful array methods.
As the creator of CoreUI, a widely used open-source UI library, I’ve encountered this scenario countless times when building interactive components.
With over 25 years of JavaScript experience, I can tell you the most efficient and modern solution is to use the spread operator or Array.from().
Both methods are clean, readable, and supported in all modern browsers.
Convert a NodeList to an array using the spread operator [...] or Array.from().
const nodes = [...document.querySelectorAll('.item')]
or
const nodes = Array.from(document.querySelectorAll('.item'))
The spread operator ... takes all elements from the NodeList and expands them into a new array. Similarly, Array.from() creates a new array instance from any iterable object like a NodeList. Both approaches give you access to all array methods like map(), filter(), and reduce(), making DOM manipulation much more flexible and powerful.
Best Practice Note
This is the same approach we use in CoreUI components to ensure DOM queries can be easily transformed and manipulated. The spread operator is slightly more concise, but Array.from() can be more readable when you need to transform elements immediately using its optional mapping function.
