JavaScript NodeList length Property

What You’ll Learn

The length property of a NodeList returns the number of items in the list. Learn how to read list.length, use it in classic for loops, check for empty lists, and understand live vs static NodeLists—with five examples and try-it labs.

Introduction

Every NodeList knows how many nodes it holds. list.length is that count—an integer from 0 upward. It is one of the most-used properties in DOM scripting because loops and empty checks depend on it.

MDN’s classic pattern: get all paragraphs, then loop for (let i = 0; i < items.length; i++) to read each node at index i.

Understanding the length Property

A read-only instance property on NodeList that returns how many items the list currently contains.

• Returns — a non-negative integer.
• Read-only — assigning to length has no effect.
• Indexes run from 0 to length - 1.
• Live lists (e.g. childNodes) update length when the DOM changes.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Read the property on a NodeList:

list.length

Return value

An integer representing the number of items in the NodeList.

Typical pattern (MDN idea)

const items = document.getElementsByTagName("p");

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

⚖️ length vs Related Ideas

Examples Gallery

Examples follow MDN NodeList.length. Labs use querySelectorAll, getElementsByTagName, and childNodes.

const items = document.querySelectorAll("li");
console.log(items.length);
// 3

3

const items = document.getElementsByTagName("p");
let combined = "";

for (let i = 0; i < items.length; i++) {
  combined += items[i].textContent;
}

console.log(combined);

Hello world

const items = document.querySelectorAll(".missing-class");

if (items.length === 0) {
  console.log("No matches");
} else {
  console.log("Found", items.length);
}

No matches

const box = document.getElementById("box");
console.log(box.childNodes.length);
// often > box.children.length when whitespace exists

childNodes: 3
children: 1

const list = document.getElementById("live").childNodes;
console.log("before", list.length);

document.getElementById("live").appendChild(document.createElement("span"));
console.log("after", list.length);

before 1
after 2

🚀 Common Use Cases

• Bound a classic for loop: i < list.length.
• Check whether any nodes matched: list.length > 0.
• Get the last index: list.length - 1.
• Compare counts before and after DOM updates on live lists.
• Decide whether to run logic when a selector finds nothing.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• length is read-only; you cannot set it directly.
• Valid indexes: 0 through length - 1.
• querySelectorAll returns a static NodeList; childNodes is live.
• Related learning: item(), forEach(), childNodes, entries().

💡 Best Practices