# Difference between a NodeList and 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-nodelist-vs-array

> A quick guide to understand the difference between a NodeList and an array in JavaScript.

In an [earlier article](https://attacomsian.com/blog/javascript-foreach), we looked at the ES6's `forEach()` method to iterate through the elements of a [`NodeList`](https://attacomsian.com/blog/javascript-nodelist) as well as [arrays](https://attacomsian.com/blog/javascript-arrays) in JavaScript.  In this quick guide, I'll talk about the difference between a `NodeList` and an array to understand how they work under the hood. 

A `NodeList` may look like an array, but they are two completely different things. A `NodeList` object is a collection of [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) nodes extracted from the HTML document. An array is a special data type in JavaScript that can store a collection of arbitrary elements.

To create a `NodeList` object, you can use the `querySelectorAll` method. The following example selects all `<p>` elements in the document:

```javascript
const paragraphs = document.querySelectorAll('p')
```

A JavaScript array can be created by either using the array literal syntax or the `Array` constructor:

```javascript
const foods = ['Pizza', 'Pasta', 'Burger', 'Cake']
// OR
const foods = new Array('Pizza', 'Pasta', 'Burger', 'Cake')
```

Both arrays and `NodeList` provide the `length` property to get the total number of items stored:

```javascript
console.log(`NodeList items: ${paragraphs.length}`)
console.log(`Array items: ${foods.length}`)
```

The elements of both `NodeList` and arrays can be accessed by a numeric index:

```javascript
const p = paragraphs[2] // 3rd node
const f = foods[1] // 2nd food name
```

Although you can access the `NodeList` elements like an array and use the same `length` property, there are still three key differences. 

1. You can not use the common array methods like `push()`, `pop()`, `slice()`, and `join()` directly on a `NodeList`. You must first [convert a `NodeList`](https://attacomsian.com/blog/javascript-convert-nodelist-to-array) to a normal array using the `Array.from()` method.
2. Unlike an array, a `NodeList` can be a [live collection](https://attacomsian.com/blog/javascript-nodelist#live-vs-static-nodelist). Any element is added or removed from the DOM, and the changes are automatically applied to the collection. Both `querySelector()` and `querySelectorAll()` methods return a *static* list, which doesn't update if you make any changes to the DOM. However, the properties like `Node.childNodes` are *live* lists, which will update as soon as you modify the DOM.
3. Finally, the last thing that differentiates a `NodeList` from an array is that the `querySelectorAll()` is not a JavaScript API but a browser API. This is a little confusing because we use these APIs in JavaScript to manipulate the DOM. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#DOM_and_JavaScript), other languages can also access these APIs to interact with the DOM.

Here is a Python DOM manipulation example (source MDN):

```bash
# Python DOM example
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")
```

The biggest takeaway from the `NodeList` vs. an array discussion: a `NodeList` is a collection of nodes that can be used to access and manipulate DOM elements, and an array is a JavaScript object that can hold more than one value at a time.

A `NodeList` and an array have their own prototypes, methods, and properties. You can easily [convert](https://attacomsian.com/blog/javascript-convert-nodelist-to-array) a `NodeList` into an array if you want to, but not the other way around.