DOM NodeLists

A NodeList is an array-like collection of DOM nodes returned by certain DOM methods or properties. It allows you to access multiple nodes (elements, text nodes, comments, etc.) and perform operations like looping, reading, or modifying.

What is a NodeList?

A NodeList represents a list (collection) of nodes in the DOM tree.

You often get a NodeList when you use DOM methods like:

document.querySelectorAll()
document.childNodes
element.childNodes
document.getElementsByName()

Example:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

<script>
const list = document.querySelectorAll("p");
console.log(list); // NodeList(3)
console.log(list[0].textContent); // "Paragraph 1"
</script>

Characteristics of NodeLists

Feature	Description
Type	Array-like object (not a real array)
Indexing	Access elements using index numbers
Length	`.length` property gives total nodes
Iteration	Can use `for`, `for...of`, or `forEach()`
Live/Static	May be live or static depending on how it’s created

Live vs Static NodeLists

Static NodeList

Does not update automatically when the DOM changes.
Created by methods like querySelectorAll().

Live NodeList

Automatically updates when DOM nodes are added or removed.
Created by properties like childNodes.

Static NodeList Example

<ul id="list">
  <li>Apple</li>
  <li>Banana</li>
</ul>

<script>
const items = document.querySelectorAll("li"); // Static NodeList
console.log(items.length); // 2

// Add a new item
const newItem = document.createElement("li");
newItem.textContent = "Cherry";
document.getElementById("list").appendChild(newItem);

console.log(items.length); //  Still 2 (doesn't update)
</script>

Live NodeList Example

<ul id="list">
  <li>Dog</li>
  <li>Cat</li>
</ul>

<script>
const items = document.getElementById("list").childNodes; // Live NodeList
console.log(items.length); // 3 (includes text nodes)

const newItem = document.createElement("li");
newItem.textContent = "Bird";
document.getElementById("list").appendChild(newItem);

console.log(items.length); //  Updates automatically
</script>

Common Ways to Get a NodeList

Method/Property	Returns	Type
`document.querySelectorAll(selector)`	All matching elements	Static
`element.childNodes`	All child nodes (including text/comments)	Live
`document.getElementsByName(name)`	All elements with given name	Live
`document.querySelectorAll()`	NodeList of matched elements	Static

Accessing NodeList Elements

You can access NodeList elements by index or loop through them.

Access by Index

const list = document.querySelectorAll("p");
console.log(list[0].textContent);

Using for Loop

for (let i = 0; i < list.length; i++) {
  console.log(list[i].innerText);
}

Using for...of

for (let node of document.querySelectorAll("div")) {
  console.log(node.textContent);
}

Using forEach()

document.querySelectorAll("p").forEach((el, index) => {
  el.style.color = "blue";
  console.log(`Paragraph ${index + 1}: ${el.textContent}`);
});

NodeList vs HTMLCollection

Feature	NodeList	HTMLCollection
Contains	All node types (element, text, comment)	Only element nodes
Live/Static	Can be live or static	Always live
Supports forEach()	Yes	No
Returned by	`querySelectorAll()`, `childNodes`	`getElementsByTagName()`, `children`
Auto Updates	Only live NodeLists	Always updates

Converting NodeList to an Array

Sometimes you need to use array methods like .map(), .filter(), or .reduce().

You can easily convert a NodeList to an array:

Using Array.from()

const nodes = document.querySelectorAll("p");
const arr = Array.from(nodes);
arr.map(el => el.style.fontWeight = "bold");

Using Spread Operator

const arr = [...document.querySelectorAll("li")];