JavaScript Document childElementCount Property

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

Definition

Document.childElementCount is a read-only number: how many direct child elements the document has (MDN). On a typical HTML page it is 1—the <html> root.

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

Syntax

Use document.childElementCount. Start with this line.

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

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

Library declarations
JavaScript
document.childElementCount

Parameters

ParameterDescription
childElementCountRequired. Read-only number of direct element children
childrenOptional. Live HTMLCollection of those elements

Return Value

Return ValueDescription
*The current value of document.childElementCount.

JavaScript Examples

Example 1 — Read document.childElementCount

Log the count and the first element child’s tag name (MDN pattern).

JavaScript
console.log(document.childElementCount);
console.log(document.children[0].tagName); // "HTML"
Try It Yourself

How It Works

  1. Read the count. No arguments—just document.childElementCount.
  2. Typical result. Normal HTML pages return 1.
  3. Inspect the child. document.children[0] is usually the <html> element.
  4. Tag name. tagName prints "HTML" in HTML documents.

Example 2 — Match document.children.length

Both APIs count the same set of direct element children.

JavaScript
console.log(document.childElementCount);
console.log(document.children.length);
console.log(document.childElementCount === document.children.length);
Try It Yourself

How It Works

  1. Number vs collection. childElementCount is the count; children is the list.
  2. Same filter. Both include only element nodes.
  3. Equality. On a healthy document, the lengths match.
  4. When to use which. Prefer the number for checks; use children to access nodes.

Example 3 — vs childNodes.length

Doctype and other non-element nodes inflate childNodes, not childElementCount.

JavaScript
console.log("childElementCount:", document.childElementCount);
console.log("childNodes.length:", document.childNodes.length);
// childNodes is often larger (includes doctype)
Try It Yourself

How It Works

  1. Element filter. childElementCount skips doctype, text, and comments.
  2. Full child list. childNodes includes every node type.
  3. Typical gap. Doctype + html → length 2, element count 1.
  4. Pick the right tool. Want elements only? Use childElementCount / children.
Compatibility

Browser Support

Document.childElementCount is Baseline Widely available on MDN (since April 2018). It is part of the ParentNode mixin shared with Element and DocumentFragment.

✓ Baseline · Widely available

Document.childElementCount

Read-only count of direct element children on a Document — usually 1 for HTML.

99% 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
childElementCount Excellent

Bottom line: Safe for all modern browsers. Remember: document-level count is rarely useful for UI — prefer Element.childElementCount on the container you care about.

Frequently Asked Questions

The number of direct child elements of the document — element nodes only, not text, comments, or the doctype. On a typical HTML page the value is 1 (the html element).
No. MDN marks Document.childElementCount as Baseline Widely available (since April 2018). It comes from the ParentNode mixin on Document.
Same property name and behavior, different node: document.childElementCount counts the document's direct element children; element.childElementCount counts an element's direct element children.
Yes. childElementCount equals the length of the document.children HTMLCollection — both count direct element children only.
MDN: document.children usually contains a single html element — the document's only direct element child.
No. It is read-only. The count changes only when direct element children of the document are added or removed (rare in normal apps).

Next: children

Learn the live HTMLCollection of a document’s direct 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)

11 people found this page helpful

JavaScript Document characterSet Property JavaScript Document children Property