JavaScript NodeList: querySelectorAll, forEach, and Array.from

A NodeList is an ordered, array-like collection of DOM nodes—most often returned by document.querySelectorAll()—with indexed access and a length, but not the full suite of Array prototype methods unless you convert it. When you need map/filter ergonomics, copy it with Array.from(...) or spread syntax; for how those selectors work first, read JavaScript querySelector and querySelectorAll.

Environment: Node.js v20.18.2. After each runnable snippet, the following paragraph states the expected console output (order and values).

What Is a NodeList in JavaScript?

A NodeList is an ordered collection of nodes. It is array-like because it has numeric indexes and a length, but it is not a true JavaScript array.

const paragraphs = document.querySelectorAll("p");

console.log(paragraphs.length);
console.log(paragraphs[0]);

querySelectorAll() returns a static NodeList, which means it represents the matching elements at the time the selector ran.

Method 1: Loop Through a NodeList with forEach()

Modern NodeList objects support forEach().

const items = document.querySelectorAll("li");

items.forEach((item) => {
  item.classList.add("active");
});

Use this when you only need to loop through DOM nodes.

Method 2: Convert NodeList to Array

Use Array.from() when you need array methods such as map(), filter(), or reduce().

const fakeNodeList = { 0: "p.one", 1: "p.two", length: 2 };
const array = Array.from(fakeNodeList);

console.log(array.join(","));

You should see one line logging p.one,p.two.

With a real browser NodeList, the pattern is the same:

const nodes = Array.from(document.querySelectorAll("p"));

NodeList vs Array

Convert a NodeList to an array when you need full array behavior.

NodeList vs HTMLCollection

querySelectorAll() returns a static NodeList. Many getElementsBy... methods return a live HTMLCollection, which updates as the DOM changes.

This difference matters when you cache a collection and later add or remove matching DOM nodes.

Common Questions About NodeList

Is NodeList an array?

No. A NodeList is array-like, but it is not a real array.

How do I convert a NodeList to an array?

Use Array.from(nodeList) or [...nodeList].

What is NodeListOf?

NodeListOf<T> is a TypeScript type representing a NodeList whose items are a specific node type, such as NodeListOf<Element>.

Summary

JavaScript NodeList objects are DOM collections returned by APIs such as querySelectorAll(). They have indexes and length, and modern NodeLists support forEach(), but they are not full arrays. Convert them with Array.from() or spread syntax when you need array methods. Remember that querySelectorAll() returns a static NodeList, while many getElementsBy... APIs return live HTMLCollections.

Official Documentation

• MDN: NodeList
• MDN: querySelectorAll()