# How to convert a NodeList to an array in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Feb 28, 2020, updated Oct 13, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-convert-nodelist-to-array

> A quick guide to learning about different ways to convert a NodeList object to an array in JavaScript.

A [NodeList](https://attacomsian.com/blog/javascript-nodelist) is an array-like object representing a collection of DOM elements or nodes. 

It looks like an [array](https://attacomsian.com/blog/javascript-arrays), however, you can not use common array methods like `map()`, `slice()`, and `filter()` on a `NodeList` object. 

Read [this guide](https://attacomsian.com/blog/javascript-nodelist-vs-array) to understand the difference between a `NodeList` and an array.

> [...] a `NodeList` is a collection of nodes that can be used to access and manipulate DOM elements, while an array is a JavaScript object which can hold more than one value at a time.
> 
> 
> 
> Both NodeLists and arrays have their own prototypes, methods, and properties. You can easily convert a `NodeList` to 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 in JavaScript.

## `Array.from()` Method

In modern JavaScript, the simplest and easiest way to convert a `NodeList` object to an array is by using the [`Array.from()`](https://attacomsian.com/blog/javascript-array-from) method:

```javascript
// 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 *regular* `Array` object containing all the nodes returned by the `querySelectorAll()` method.

The `Array.from()` method was introduced in ES6 and creates a new, shallow-copied `Array` object from the `NodeList` object in modern browsers. For old browsers like IE, you need a [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill). 

## Spread Operator

Another way to create an `Array` object from a `NodeList` is by using the spread operator syntax (`[...iterable]`):

```javascript
// 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 super easy way of converting a `NodeList` to an array in JavaScript.  Like `Array.from()`, it *only* works in modern browsers.

## `Array.prototype.slice()` Method

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:

```javascript
// 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:

```javascript
const divsArr = [].slice.call(divs)
```

The `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.

All of the above methods give a real JavaScript array, which you can iterate through using [`forEach()`](https://attacomsian.com/blog/javascript-foreach) and use all your favorite array methods to do different things.