Document.childElementCount is a read-only instance property (from the ParentNode mixin) that returns how many element children sit directly under the document node. Learn MDN’s typical value of 1 (<html>), how it differs from childNodes, and when to use Element.childElementCount instead—with five examples and try-it labs.
Read-only
number
Elements only
1 (html)
children.length
Baseline widely
The DOM tree starts at the Document node. Its direct children include the doctype, comments, and usually one element: <html>. childElementCount ignores non-element nodes and counts only those element children.
MDN’s example: on a normal page, document.children is an HTMLCollection with a single <html> entry, and document.childElementCount is 1.
To count items inside a <ul>, <div>, or <body>, use Element.childElementCount. This page covers the same property on Document itself.
Related tutorials: body, Element.children, appendChild().
Document.childElementCountA read-only instance property from the ParentNode interface, exposed on Document. Its value is the number of direct child Element nodes.
1 for HTML documents).<html>.document.children.length on supporting browsers.document.childElementCountA number — count of direct element children of the document.
document.children;
// HTMLCollection, usually containing an <html> element
document.childElementCount;
// 1| Goal | Code / note |
|---|---|
| Count document element children | document.childElementCount |
| Same via collection | document.children.length |
| First element child | document.children[0] or document.documentElement |
| Count inside body | document.body.childElementCount |
| Includes doctype? | No (doctype is not an element child) |
| MDN status | Baseline Widely available |
Four facts about document.childElementCount.
numberRead-only
direct onlyNot descendants
1html child
baselineParentNode
childElementCount vs childNodes.lengthchildElementCount | childNodes.length | |
|---|---|---|
| Node types | Elements only | Elements, text, comments, doctype, etc. |
| On Document | Usually 1 | Usually 2+ (doctype + html) |
| Use when | Count element slots at document root | Need every child node type |
| MDN on Document | This property | Node.childNodes (broader) |
Examples follow MDN Document: childElementCount. Use View Output or Try It Yourself for each case.
Read the document-level element child count.
document.childElementCountLog the count and inspect document.children.
console.log(document.childElementCount);
console.log(document.children[0].tagName); // "HTML"The document’s only direct element child is usually the root <html> element.
document.children.lengthVerify both APIs report the same element-child count.
console.log(document.childElementCount);
console.log(document.children.length);
console.log(document.childElementCount === document.children.length);childElementCount is a convenience number; children gives you the live collection.
Contrast with childNodes and count inside body.
childNodes.lengthShow that doctype and other non-element nodes inflate childNodes.
console.log("childElementCount:", document.childElementCount);
console.log("childNodes.length:", document.childNodes.length);
// childNodes often larger (includes doctype node)Use childElementCount when you care about element children only—not doctype or comment nodes.
document.documentElementWhen count is 1, the sole element child is the html root.
console.log(document.childElementCount);
console.log(document.children[0] === document.documentElement);
console.log(document.documentElement.tagName);document.documentElement is shorthand for the document’s root element when count is 1.
body.childElementCountDocument count is almost always 1; body count reflects visible page structure.
console.log("document:", document.childElementCount);
console.log("body:", document.body.childElementCount);
// body counts direct element children (header, main, script, etc.)For list-like UI counts, use Element.childElementCount on the container element—not on Document.
document.children[0] exists before access.childElementCount Works on DocumentParser attaches doctype and builds the tree.
<html> added as childRoot element becomes a direct child of Document.
Doctype/comments ignored — count is typically 1.
document.childElementCount updates if direct element children change.
document.children.length.Document.childElementCount is marked Baseline Widely available on MDN (since April 2018). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only count of direct element children on Document — typically 1 (the html element).
Bottom line: Use document.childElementCount for document-root element counts. For lists and containers inside the page, use Element.childElementCount on the specific parent node.
Document.childElementCount tells you how many element nodes sit directly under the document—almost always one <html> on standard pages. Use it to understand document-root structure; use Element.childElementCount for everyday container counting.
Continue with children, ownerDocument, Element childElementCount, or the JavaScript hub.
document.documentElement to access the html root directlyelement.childElementCount for container/list countschildren.length when you need the collection toochildElementCount over filtering childNodes manuallydocument.childElementCount on normal pagesdocument.childElementCountchildElementCountdocument.childElementCountDirect element-child count — usually 1 on HTML pages.
number
APIbaseline
Standard1 (html)
MDNchildNodes
CompareElement API
Use caseThe same childElementCount property exists on DocumentFragment and Element through the shared ParentNode mixin—only the node you call it on changes what gets counted.
Learn the live HTMLCollection of document element children.
6 people found this page helpful