A NodeList object is a essentially collection of nodes (DOM elements) taken from the HTML document. It is very much like an array 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 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() method returns a static NodeList, while the Node.childNodes property returns a live NodeList.

Here is an example of a live NodeList:

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.

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:

const divs = document.querySelectorAll('div')

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

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

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 loop:

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() method. It executes the given function once for each element in the NodeList collection:

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 to learn about more ways of iterating over DOM elements in JavaScript, including the latest for...of 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() 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 — 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 over a NodeList object. The easiest one is the 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.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.