JavaScript Node childNodes Property

What Is childNodes?

The read-only childNodes property returns a live NodeList of direct child nodes (MDN) — elements, text, and comments. Index 0 is the first child.

parent.childNodes
→ live NodeList [child0, child1, …]

Includes: Element, Text, Comment, …
Excludes: only looking at HTML tags → use .children

Live = add/remove children → length & indexes update
childNodes[0] may be whitespace text, not your first <div>

How to Use childNodes

Read the live list, then loop or inspect nodeName / nodeType.

1. Get a parent node (often an element).
2. Optionally check hasChildNodes().
3. Read parent.childNodes (same NodeList on repeat reads).
4. Loop with for…of — remember the list is live.

Pseudocode

if parent.hasChildNodes():
  for node in parent.childNodes:
      // node may be Element, Text, Comment, …
      use node.nodeName / node.nodeType

elements only?
  for el in parent.children: …

clear all children:
  while parent.firstChild:
      parent.removeChild(parent.firstChild)

Cheat Sheet

Keep these facts handy when walking child lists.

Live Preview

Inspect #box. Compare childNodes.length with children.length (whitespace counts).

Choose an action, then Run…

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

const para = document.getElementById("para");

if (para.hasChildNodes()) {
  for (const node of para.childNodes) {
    console.log(node.nodeName);
  }
}

#text
SPAN
#text

const box = document.getElementById("box");
console.log("childNodes:", box.childNodes.length);
console.log("children:", box.children.length);

childNodes: 5
children: 2

const box = document.getElementById("box");
console.log(box.childNodes[0].nodeName);
console.log(box.children[0].nodeName);

#text
SPAN

const box = document.getElementById("box");
const list = box.childNodes;
console.log(list.length);

box.appendChild(document.createTextNode("!"));
console.log(list.length); // grew — same list object

before: 2
after: 3

const box = document.getElementById("box");

while (box.firstChild) {
  box.removeChild(box.firstChild);
}
console.log(box.childNodes.length); // 0

0

Performance Notes

Prefer children / querySelector when you do not need text nodes — fewer items to visit in pretty-printed markup.

Key Takeaways