# Introduction to NodeList in JavaScript

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

> A detailed guide to learning what is a NodeList object, how it differs from arrays and HTMLCollection, and how to use it in JavaScript.

A `NodeList` object is a essentially collection of nodes (DOM elements) taken from the HTML document. It is very much like an [array](https://attacomsian.com/blog/javascript-arrays) but doesn't support array methods as they are two completely different things.

In this article, you will learn about `NodeList` and how to use it in JavaScript to iterate over a list of [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) elements. The tutorial briefly covers the difference between a `NodeList` and an `HTMLCollection`.

## Live vs. static `NodeList`

A `NodeList` can be *live* or *static*; changes to the DOM are either applied automatically to the collection or don't affect the collection elements.

The [`querySelectorAll()`](https://attacomsian.com/blog/getting-dom-elements-javascript#query-selector-all) method returns a static `NodeList`, while the `Node.childNodes` property returns a live `NodeList`.

Here is an example of a live `NodeList`:

```javascript
const parent = document.getElementById('sidebar')

// collect children (return Live NodeList)
let childNodes = parent.childNodes

// print length (assume "1")
console.log(childNodes.length)

// add a new Node to parent
parent.appendChild(document.createElement('div'))

// print length again (output "2")
console.log(childNodes.length)
```

It's good to remember this distinction when you decide to [iterate over a `NodeList`](https://attacomsian.com/blog/javascript-loop-dom-elements).

## Creating a `NodeList`

The `querySelectorAll()` method can be used to extract a JavaScript `NodeList` object from the document. The following example selects all `<div>` elements in the document:

```javascript
const divs = document.querySelectorAll('div')
```

To select a specific node from the `NodeList` collection, use the index number (starts at 0):

```javascript
// select 3rd node in NodeList
const div = document.querySelectorAll('div')[2]
```

## Length of the `NodeList`

The number of nodes inside a `NodeList` object can be accessed through the `NodeList.length` property:

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

// print NodeList length
console.log(paragraphs.length)
```

The `length` property can be useful while iterating over a `NodeList` using the traditional [for](https://attacomsian.com/blog/javascript-loops) loop:

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

// iterate over all paragraphs
for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i].innerText)
}
```

## Iterating over a `NodeList`

There are several ways to iterate over a `NodeList` object in JavaScript. The simplest and easiest way is to use the [`forEach()`](https://attacomsian.com/blog/javascript-foreach#looping-through-nodelists) method. It executes the given function once for each element in the `NodeList` collection:

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

// iterate over all paragraphs
paragraphs.forEach((p, index) => {
  console.log(p.innerText)
})
```

Modern browsers also support `entries()`, `keys()`, and `values()` methods on a `NodeList` object. Take a loop at [this guide](https://attacomsian.com/blog/javascript-loop-dom-elements) to learn about more ways of iterating over DOM elements in JavaScript, including the latest [`for...of`](https://attacomsian.com/blog/javascript-for-of-loop) statement. 

## `NodeList` vs. Arrays

A `NodeList` may look like an array, but both are two different things. You can iterate through a `NodeList` using `forEach()` and directly access its nodes using an index value, just like an array.

However, you can not use array methods like `push()`, `pop()`, `join()`, and `valueOf()` for a `NodeList`. A `NodeList` can be converted to a real array using the [`Array.from()`](https://attacomsian.com/blog/javascript-array-from) method (only works in modern browsers).

## `NodeList` vs. `HTMLCollection`

A `NodeList` and an `HTMLCollection` are very much the same thing. An `HTMLCollection` is basically a collection of HTML elements, while a `NodeList` object consists of element nodes. So both these collections refer to the same things &mdash; HTML elements.

They both have a `length` property to get the total number of items inside the collection. Each item is accessible using an index number, just like an array. 

However, besides the index number, the items inside the `HTMLCollection` can be accessed through their *name* and *ID*, something that is *not* possible with a `NodeList` object.

Likewise, the `NodeList` object can contain *attribute* and *text* nodes. That is not the case with JavaScript's `HTMLCollection`.

One more similarity between a `NodeList` and an `HTMLCollection` is that they are *not* arrays, so you can use the array methods like `push()`, `pop()`, `join()`, and `valueOf()` for `HTMLCollection` too.

## Summary

In this article, we looked at the `NodeList` object and how to use it in JavaScript. In short:

1. A `NodeList` is a collection of element nodes (DOM elements).
2. A `NodeList` can be *live* or *static*. Modifications to DOM elements are applied instantly to the collection or completely ignored.
3. The `document.querySelectorAll()` method can be used to create a static `NodeList` in JavaScript.
4. The total number of nodes inside a `NodeList` can be displayed using the `length` property.
5. JavaScript provides several ways to [iterate](https://attacomsian.com/blog/javascript-loop-dom-elements) over a `NodeList` object. The easiest one is the [`forEach()`](https://attacomsian.com/blog/javascript-foreach) method.
6. A `NodeList` is *not* an array, so basic array methods will not work for it.
7. A `NodeList` is very *similar* to an `HTMLCollection`, except that `NodeList` items are only accessible through their index number (0, 1, 2, ....), while an `HTMLCollection` elements can be accessed with an index number, name, or ID.