JavaScript Element childElementCount Property

What You’ll Learn

Element.childElementCount is a read-only instance property that returns how many element children a node has. Learn how it ignores text nodes, how it compares to childNodes.length, and how to use it for empty checks—with five examples and try-it labs.

Introduction

A container like a sidebar or list often needs a quick answer: “Does this have any child elements?” You do not always need the full list—just the count.

childElementCount returns that number. It counts only elements (tags), not text or comments sitting between them.

const sidebar = document.getElementById("sidebar");
if (sidebar.childElementCount > 0) {
  // Do something
}

Understanding the Property

MDN: the Element.childElementCount read-only property returns the number of child elements of this element.

• Read-only — change the DOM to change the count.
• Elements only — ignores text and comment nodes.
• Matches children.length — same element-only view.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

childElementCount

Value

A number: how many child elements this element currently has.

📋 MDN Sidebar Example Shape

MDN checks whether a sidebar has any element children before doing work:

<aside id="sidebar">
  <a href="#">Home</a>
  <a href="#">Docs</a>
</aside>

let sidebar = document.getElementById("sidebar");
if (sidebar.childElementCount > 0) {
  console.log("Sidebar has", sidebar.childElementCount, "links");
}

Related learning: children, firstElementChild, lastElementChild, and childNodes.

Examples Gallery

Examples follow MDN Element: childElementCount. Labs use a simple sidebar container so you can count element children safely.

const sidebar = document.getElementById("sidebar");
console.log(sidebar.childElementCount);

2

let sidebar = document.getElementById("sidebar");
if (sidebar.childElementCount > 0) {
  console.log("ready");
} else {
  console.log("empty");
}

ready

const box = document.getElementById("box");
console.log({
  childElementCount: box.childElementCount,
  childrenLength: box.children.length,
  childNodesLength: box.childNodes.length
});

{
  "childElementCount": 2,
  "childrenLength": 2,
  "childNodesLength": 5
}

const list = document.createElement("ul");
console.log(list.childElementCount); // 0

const item = document.createElement("li");
item.textContent = "One";
list.appendChild(item);
console.log(list.childElementCount); // 1

0
1

console.log({
  supported: "childElementCount" in Element.prototype,
  counts: "element children only",
  tip: "Same idea as children.length — ignores text nodes",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "counts": "element children only",
  "tip": "Same idea as children.length — ignores text nodes",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Empty-state checks before rendering lists or sidebars.
• Badge or counter UI (“3 items”) without building an array.
• Comparing container sizes after DOM updates.
• Avoiding false “has children” results from whitespace text nodes.
• Teaching the difference between nodes and elements.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only — mutate the DOM to change the value.
• Equals children.length; usually differs from childNodes.length.
• Related: attributes, children, EventTarget, JavaScript hub.

💡 Best Practices