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")];