The Node.childNodes property returns a live NodeList of a node’s direct children (elements, text, and comments). Learn whitespace gotchas, childNodes vs children, safe loops, and clearing children—with five examples and try-it labs.
Read-only property
Live NodeList
Elements + text
Elements only
Whitespace nodes
Baseline widely
The DOM is a tree. Each node can have child nodes hanging underneath it. childNodes is how you read that direct-child list from JavaScript.
Unlike a plain array snapshot, the list is live: add or remove a child and the NodeList updates. Items are node objects (use .nodeName, .nodeType, .textContent), not strings.
Pretty-printed HTML creates whitespace text nodes. Prefer element.children or firstElementChild when you only care about element tags.
childNodesMDN: the read-only childNodes property returns a live NodeList of child nodes of the given node. The first child is at index 0. Child nodes include elements, text, and comments.
childNodes return the same NodeList.document.documentElement, usually <html>).const kids = node.childNodes;
const first = node.childNodes[0];
const name = node.childNodes[0].nodeName;A live NodeList containing the children of the node.
childNodes vs childrennode.childNodes | element.children | |
|---|---|---|
| Interface | Node | Element |
| Contains | All child nodes (elements, text, comments) | Element children only |
| Collection type | Live NodeList | Live HTMLCollection |
| Best for | Full DOM tree walks | Working with tags / layout |
| Goal | Code |
|---|---|
| Get the list | node.childNodes |
| Count children | node.childNodes.length |
| First child node | node.childNodes[0] or node.firstChild |
| Check before looping | if (node.hasChildNodes()) { … } |
| Elements only | element.children |
| Clear all children | while (node.firstChild) node.removeChild(node.firstChild); |
| MDN status | Baseline Widely available (since July 2015) |
Four facts to remember about Node.childNodes.
NodeListLive collection
widelySince July 2015
read-onlyList is live
#textWhitespace nodes
Examples follow MDN Node.childNodes patterns. Use View Output or Try It Yourself for each case.
Loop children and notice text nodes from whitespace.
hasChildNodes()MDN-style: check for children, then walk the live list.
const para = document.querySelector("p");
if (para.hasChildNodes()) {
const children = para.childNodes;
for (const node of children) {
console.log(node.nodeName, node.nodeType);
// NOTE: List is live! Adding or removing children changes length
}
}hasChildNodes() avoids empty loops. nodeType 1 is an element; 3 is a text node.
Pretty-printed HTML often makes childNodes[0] a #text node.
// HTML source:
// <ul id="list">
// <li>One</li>
// </ul>
const list = document.getElementById("list");
console.log(list.childNodes[0].nodeName); // often "#text" (newline/indent)
console.log(list.children[0].nodeName); // "LI"Browsers keep whitespace from the source as text nodes. children skips them and returns only elements.
Compare collections, empty a node, and inspect document.
childNodes vs childrenSee how many extra text/comment nodes inflate childNodes.length.
const box = document.getElementById("box");
console.log("childNodes:", box.childNodes.length);
console.log("children:", box.children.length);
for (const node of box.childNodes) {
if (node.nodeType === Node.ELEMENT_NODE) {
console.log("element:", node.tagName);
}
}Filter with Node.ELEMENT_NODE when you must use childNodes but only want elements.
MDN pattern: drain the live list with firstChild / removeChild.
const box = document.getElementById("box");
while (box.firstChild) {
// The list is LIVE so it re-indexes each call
box.removeChild(box.firstChild);
}
console.log(box.childNodes.length); // 0Each removal shrinks the live list. Using a reverse index loop over childNodes while mutating can also work; the while (firstChild) pattern is simple and clear.
document.childNodesThe document usually has a doctype node and the root <html> element.
for (const node of document.childNodes) {
console.log(node.nodeName, node.nodeType);
}
console.log("documentElement:", document.documentElement.nodeName);
// Often: html document type (#document-type / 10) and HTML (1)MDN: the document object itself has two common children—the doctype declaration and the root element (documentElement).
#text.children for UI — when you only need element tags for layout logic.childNodes WorksEngine returns the live NodeList for that parent.
Elements, text (often whitespace), and comments.
DOM mutations update the same list object.
Read nodeName, nodeType, textContent, and so on.
Element.children when you only want element tags.Node.childNodes is Baseline Widely available across modern browsers (MDN: since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.
Safe for production. Remember the NodeList is live and may include whitespace text nodes from your HTML source.
Bottom line: Use childNodes for every child node type; use Element.children when you only need elements.
Node.childNodes gives you a live list of every direct child—including text and comments. Watch for whitespace nodes, prefer children for element-only work, and clear containers with a live-safe loop when needed.
Continue with firstChild, baseURI, or the JavaScript hub.
hasChildNodes() before assuming children existchildren / firstElementChild for element-only worknodeType when filtering childNodeswhile (node.firstChild) removeChild(…)childNodes[0] is always an elementNodeList like a frozen array snapshotNode with the Node.js runtimechildNodes (read-only property)childNodesLive children of every node type.
auto-updates
APIel + text + !--
Content#text traps
Gotchaelements only
Comparewhile firstChild
PatternCalling node.childNodes multiple times returns the same NodeList object. That is why a stored reference stays up to date after you append or remove children—you are not holding a copied array.
Read the first child node—or null when empty.
5 people found this page helpful