How to Convert a NodeList to an Array in JavaScript

This article will show you how you can convert a NodeList into an Array, so you can use array methods like map. As a bonus, it will also show you how you can still iterate over a NodeList without having to convert it to an Array first.

If you have ever tried to get some elements from the HTML DOM tree using a querySelectorAll, you may have come across the dreaded message below when you tried to map over all the elements.

Error: nodeList.map is not a function...

And maybe your first reaction was something like this…

…is NOT a function??? WTF!?! Why is this not working?

Well, have no fear! I’m assuming you found this article by using at least one of the 5 most useful skills to have as a developer. Or you are trying to build up your skills to become better at solving programming bug.

Either way… good on you! You found the right place!

I will show you several ways that you can resolve the above issue. First by converting a NodeList to an Array in JavaScript. Then, as a bonus, I’ll also show you how to iterate over it without actually having to convert it to an array.

But first… let’s quickly go over a NodeList!

What is a NodeList?

According to the MDN NodeList documentation, a NodeList is an array-like object that contains nodes.

And nodes are just a fancy way of saying an HTML DOM element. Some examples of nodes would be the following…

• <p>
• <h2>
• <div>
• <span>

And I could keep going, but I think you get the idea.

This means that when you query for all instances of say the p tag, you will get back a collection of p nodes in a NodeList. This allows you to then select, extract, access and/or modify any of these p nodes, which (again) are really just HTML DOM elements.

On the other hand, an Array is a JavaScript object that can hold a specific value, or multiple values, in it.

Because of the slight difference between the two, this means that you cannot use pure Array methods like map(), filter(), push(), slice(), and pop() on a NodeList object.

So… WTF can you do then?

How to Convert a NodeList to an Array

Using … (Spread Operator)

By far the easiest way to fix this is to use the spread operator (...) to copy all of the node items inside the NodeList, into an Array. You can achieve this by doing the following…

// An example where you would get back a nodeList
const nodeList = document.querySelectorAll('p');

// Then you can convert the nodeList into an array
const array = [...nodeList]; 

That is it and it’s super simple. This is the power of using modern, ES6+ JavaScript.

Using Array.from()

Another simple and straightforward method in JavaScript to convert a NodeList into an Array is by using the Array.from() method. While it might be a few more characters of code than the spread operator method, it is in a more readable format!

An example of how to do this is shown below.

// An example query that retrieves a nodeList
const nodeList = document.querySelectorAll('p');

// Then to convert the nodeList into an array...
const array = Array.from(nodeList);

This is another modern, ES6+ JavaScript feature.

Using Array.slice.call()

The final way to convert a NodeList into an Array is the longest method, and probably one that is seldomly used.

However, it can still be done simply by using the JavaScript slice method, and then binding the call method to the object.

Then you can iterate over your newly created array, with JavaScript Array methods.

An example of how to do this is shown below.

// An example query that retrieves a nodeList
const nodeList = document.querySelectorAll('p');

// Then to convert the nodeList into an array...
const array = Array.prototype.slice.call(nodeList);

// Alternatively, you can also simplify the above expression to
const array = [].slice.call(nodeList);

Bonus - How to Iterate over a NodeList Without Converting it to an Array First

Okay, this last section is just for fun. As it is meant to show you how to iterate over a NodeList without having to convert it into an Array in the first place.

Yes… it is possible!

These are just less common approaches in JavaScript compared to using the map() method.

Using forEach()

This first method (forEach()) is probably the most likely to be seen in code out of all of the following methods in this section.

Depending on your needs, it may be the perfect solution where you can still iterate over each node item without having to convert the NodeList into an Array.

How can you accomplish that?

// An example query that retrieves a nodeList
const nodeList = document.querySelectorAll('p');

// Then simply execute your code using a `forEach` method
nodeList.forEach(node => {
    // your code goes here...
    console.log(node);
});

Using for…of

Continuing with the for-type looping methods, we can also use the for...of method to loop over a NodeList without having to convert it to an Array first.

This can be done in the following manner.

// An example query that retrieves a nodeList
const nodeList = document.querySelectorAll('p');

// Then simply execute your code using a `for...of` loop
for (let node of nodeList) {
    // your code goes here...
    console.log(node);
}

Using a for loop

Another method to access each node item in a NodeList is by using the for loop. Probably the first JavaScript loop you learned about.

Similar to the previous sections, this can be done in the following manner.

// An example query that retrieves a nodeList
const nodeList = document.querySelectorAll('p');

// Then simply execute your code using a `for` loop
for (let i = 0; i < nodeList.length; i++) {
    // your code goes here...
    console.log(nodeList[i]);
}