Clean • Professional
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.
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.childNodeselement.childNodesdocument.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>
| 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 |
Static NodeList
querySelectorAll().Live NodeList
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>
| 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 |
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}`);
});
| 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 |
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")];