NodeList.length returns the number of nodes in the list as an integer (MDN). Empty lists have length 0. The property is read-only.
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use nodeList.length. Start with this line.
nodeList.length| Call | What it does |
|---|---|
nodeList.length | Primary signature. |
Built into the browser. Read nodeList.length on a NodeList — no import required.
nodeList.lengthThis member has no parameters beyond those shown in the signature.
| Return Value | Description |
|---|---|
| * | The current value of nodeList.length. |
Read how many elements match a selector.
// Imagine: <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>
const items = document.querySelectorAll("li");
console.log(items.length); // 3querySelectorAll returns a NodeList.length. One integer for the whole list.<li> → 3.array.length, but for DOM nodes.MDN tip: test length before you assume nodes exist.
const missing = document.querySelectorAll(".no-such-class");
const found = document.createElement("div");
found.appendChild(document.createElement("p"));
console.log(missing.length === 0); // true
console.log(found.childNodes.length > 0); // truelength is 0.length > 0.item(0) on an empty list without a check.=== 0 reads better than relying on falsy alone.for + lengthClassic index loop using length as the stop condition.
const node = document.createElement("div");
node.appendChild(document.createElement("p"));
node.appendChild(document.createElement("span"));
const list = node.childNodes;
const names = [];
for (let i = 0; i < list.length; i++) {
names.push(list.item(i).nodeName);
}
console.log(names.join(", ")); // P, SPANi < list.length visits every index.item(i) (or list[i]).forEach() when you do not need the index control.childNodes Text NodeschildNodes.length counts text nodes too — not only elements.
const node = document.createElement("div");
node.appendChild(document.createElement("p"));
node.appendChild(document.createTextNode("hey"));
node.appendChild(document.createElement("span"));
console.log(node.childNodes.length); // 3
console.log(node.children.length); // 2 (elements only)childNodes.length → 3 (includes #text).children.length → 2 (elements only).Live childNodes updates; querySelectorAll keeps its snapshot.
const wrap = document.createElement("div");
wrap.innerHTML = "<span class='x'>A</span>";
const live = wrap.childNodes;
const snap = wrap.querySelectorAll(".x");
console.log(live.length, snap.length); // 1 1
wrap.appendChild(document.createElement("span")).className = "x";
console.log(live.length, snap.length); // 2 11.<span>.childNodes.length becomes 2.querySelectorAll stays at 1 until you query again.NodeList.length is marked Baseline Widely available on MDN (since July 2015). DOM API — not a Node.js built-in.
Read how many nodes are in a NodeList across modern browsers.
Bottom line: Safe for production. Read length for empty checks and loop bounds; remember live vs static lists.
See which nodes a NodeIterator accepts.
8 people found this page helpful