hasChildNodes()?Node.hasChildNodes() returns a Boolean: true if the node has one or more child nodes, false otherwise (MDN). Children include elements, text, and comments — not only tags.
Baseline · Widely available: not Deprecated, Experimental, or Non-standard (since about July 2015).
Whitespace counts: newlines/spaces between tags become text nodes, so a “visually empty” element can still return true.
node.hasChildNodes()
→ true if childNodes.length > 0
→ false if no children
includes: Element · Text · Comment · …
MDN pattern:
if (foo.hasChildNodes()) {
// use foo.childNodes
}| Use | Prefer |
|---|---|
| Any child node? | node.hasChildNodes() |
| Only element children? | element.children.length |
| List every child | node.childNodes |
hasChildNodes()Call it on a node, then branch before reading or looping childNodes.
getElementById).node.hasChildNodes().true, use childNodes (or clear/walk children).children.length instead.| Piece | Required? | Role |
|---|---|---|
Receiver node | Yes | Node to inspect |
| Parameters | None | — |
| Return value | — | true / false |
if node.hasChildNodes():
// at least one child (any type)
use node.childNodes
else:
// empty of all node types
# element-only emptiness:
if element.children.length === 0:
// no element children (text may still exist)Keep these facts handy when checking whether a node is empty.
| Topic | Detail |
|---|---|
| Syntax | node.hasChildNodes() |
| Returns | true · false |
| Equivalent | node.childNodes.length > 0 |
| Counts | Elements, text, comments, … |
| Whitespace | Can make “empty” HTML return true |
| Element-only | element.children.length |
| Status (MDN) | Baseline Widely available |
Compare filled, empty, whitespace-only, and element-only checks on small demo nodes.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Only use childNodes when the node has children.
const foo = document.getElementById("foo");
if (foo.hasChildNodes()) {
console.log(foo.childNodes.length);
} else {
console.log("no children");
}true. Safe to read childNodes.childNodes.length is at least 1.A self-closing / empty element with no text returns false.
const empty = document.getElementById("empty");
console.log(empty.hasChildNodes()); // false
console.log(empty.childNodes.length); // 0false. Matches length 0.<div></div> with a newline inside is not empty.Pretty-printed HTML often inserts text children you do not see.
const box = document.getElementById("ws");
console.log(box.hasChildNodes()); // true
console.log(box.childNodes[0].nodeName); // #text
console.log(box.children.length); // 0hasChildNodes.nodeName is #text. Not an element.children.length stays 0. Element-only collection.children.lengthSame node, two emptiness questions.
const el = document.getElementById("ws");
console.log("hasChildNodes: " + el.hasChildNodes());
console.log("childNodes.length: " + el.childNodes.length);
console.log("children.length: " + el.children.length);hasChildNodes. Any child type.childNodes.length. Same idea as a count.children.length. Elements only.children.length === 0.Remove all children only when the container is not empty.
function clearAll(node) {
if (!node.hasChildNodes()) {
return "already empty";
}
while (node.firstChild) {
node.removeChild(node.firstChild);
}
return "cleared; hasChildNodes=" + node.hasChildNodes();
}
console.log(clearAll(document.getElementById("foo")));firstChild. Classic clear loop.false after clearing.Check these before treating hasChildNodes() as “has visible content.”
Formatted HTML often inserts #text nodes. Use children.length when you mean elements only.
true can mean only a comment or text node — not necessarily an element child.
<div></div> on one line is empty; a newline between the tags usually is not.
hasChildNodes() is clearer than childNodes.length > 0 for the same question.
Node.hasChildNodes() is Baseline Widely available (MDN, since about July 2015). Safe everywhere you use the DOM.
Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. No options — just a Boolean.
Bottom line: Use freely. Remember whitespace when interpreting “empty.”
| Approach | Cost | Best for |
|---|---|---|
hasChildNodes() | Negligible | Guards before loops / clears |
childNodes.length > 0 | Similar | Same question, less clear |
| Walk all children to “see if any” | Wasteful | Avoid — use the Boolean |
Call it when you need a yes/no. Do not poll it in animation frames.
true.children.length instead.One line: hasChildNodes() answers “any child nodes at all?” — including invisible whitespace.
Learn how node.insertBefore() inserts a child before a reference node.
10 people found this page helpful