JavaScript Element childElementCount Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CHILDELEMENTCOUNT

Definition

Element.childElementCount is a read-only number: how many element children this element has (MDN). Text nodes and comments are ignored.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.childElementCount. Start with this line.

JavaScript
el.childElementCount
CallWhat it does
el.childElementCountPrimary signature.

Built into the browser. Read or assign el.childElementCount — no import required.

Library declarations
JavaScript
el.childElementCount

Parameters

ParameterDescription
Parent elementRequired. Node whose element children you count
DOM mutationsOptional. Append/remove elements to change the count

Return Value

Return ValueDescription
*Non-negative integer

JavaScript Examples

Example 1 — Read childElementCount (MDN)

Count element children and guard with a simple check.

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

if (sidebar.childElementCount > 0) {
  console.log("has element children");
}
Try It Yourself

How It Works

  1. Find the parent. getElementById returns the sidebar element.
  2. Read the count. Only element children are included.
  3. Guard with > 0. Same pattern as MDN before using the children.
  4. Empty case. A parent with only text/whitespace still reports 0.

Example 2 — vs childNodes.length

Whitespace text between tags inflates childNodes, not childElementCount.

JavaScript
const box = document.getElementById("box");
// HTML has newlines/spaces between two <span>s

console.log(box.childElementCount); // 2
console.log(box.children.length);   // 2
console.log(box.childNodes.length); // > 2 (text nodes too)
Try It Yourself

How It Works

  1. Two element kids. Only the <span> elements count toward childElementCount.
  2. Same as children.length. Both APIs ignore non-element nodes.
  3. childNodes is broader. Newlines and spaces become text nodes in the DOM.
  4. When to use which. Want elements only → childElementCount. Want every node → childNodes.

Example 3 — Count Updates After Append

Append an element child and read the count again.

JavaScript
const list = document.getElementById("list");
console.log(list.childElementCount); // 2

list.appendChild(document.createElement("li"));
console.log(list.childElementCount); // 3
Try It Yourself

How It Works

  1. Start at 2. The list already has two <li> children.
  2. Append an element. createElement("li") adds a new element child.
  3. Read again. The property reflects the updated DOM — now 3.
  4. Text does not count. Appending a text node would not change childElementCount.
Compatibility

Browser Support

Element.childElementCount is Baseline Widely available (MDN: across browsers since July 2015).

✓ Baseline · Widely available

Element.childElementCount

Supported in all modern browsers and long-standing engines. Safe for everyday DOM code.

99% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.childElementCount Excellent

Bottom line: Universally available. Prefer it over childNodes.length when you only care about element children.

Frequently Asked Questions

It returns a read-only number: how many element children the element has. Text nodes, comments, and other non-element nodes are not counted.
No. MDN marks Element.childElementCount as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
Yes for practical use. childElementCount equals the length of the live HTMLCollection from el.children.
childNodes includes every child node (elements, text, comments). Whitespace text between tags often makes childNodes.length larger than childElementCount.
Yes. After you append or remove element children, reading childElementCount again returns the updated count.
No. It is read-only. Change the DOM with appendChild, remove, replaceChildren, and so on — then read the count again.

Next: children

Learn the children property — a live HTMLCollection of an element’s element children.

children tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

JavaScript Element attributes Property JavaScript Element children Property