Document.children is a read-only instance property (from the ParentNode mixin) that returns a live HTMLCollection of the document’s direct element children. Learn MDN’s usual [<html>] result, how to access items, how it differs from childNodes, and when to use Element.children instead—with five examples and try-it labs.
Read-only
HTMLCollection
Elements only
[<html>]
Updates with DOM
Baseline widely
The Document node sits at the top of the DOM. Its direct children can include a doctype, comments, and element nodes. document.children filters that list down to element children only.
MDN notes that for HTML documents this collection usually contains just the root <html> element—the document’s only direct element child. That is why document.children.length and document.childElementCount are both typically 1.
To list items inside a <ul>, <div>, or <body>, use Element.children. This page covers the same property on Document itself.
Related tutorials: childElementCount, body, appendChild().
Document.childrenA read-only instance property from the ParentNode interface, exposed on Document. Its value is a live, ordered HTMLCollection of direct child Element nodes.
HTMLCollection (live).document.children[i] or document.children.item(i).<html>.length is 0.document.childrenAn HTMLCollection of the document’s direct element children. On a typical HTML page this is usually just the root <html> element.
document.children;
// HTMLCollection [<html>]
// Usually only contains the root <html> element| Goal | Code / note |
|---|---|
| Get element children | document.children |
| Count them | document.children.length or childElementCount |
| First element child | document.children[0] or document.documentElement |
| item() access | document.children.item(0) |
| Children of body | document.body.children |
| MDN status | Baseline Widely available |
Four facts about document.children.
HTMLCollectionLive list
direct onlyNot descendants
[<html>]One root
baselineParentNode
children vs childNodesdocument.children | document.childNodes | |
|---|---|---|
| Node types | Elements only | Elements, text, comments, doctype, etc. |
| Collection type | HTMLCollection | NodeList |
| On Document | Usually one html | Often doctype + html |
| Use when | You want element children only | You need every child node type |
Examples follow MDN Document: children. Use View Output or Try It Yourself for each case.
Inspect the document-level element children collection.
document.childrenLog the collection and the first child’s tag name.
console.log(document.children);
// HTMLCollection [<html>]
console.log(document.children[0].tagName); // "HTML"The document’s only direct element child is usually the root <html> element.
item() AccessRead the same child two ways and compare with documentElement.
const first = document.children[0];
const viaItem = document.children.item(0);
console.log(first === viaItem); // true
console.log(first === document.documentElement); // trueArray-style indexing and item(i) both return the element at that position in the live collection.
Relate length, childNodes, and everyday Element.children usage.
childElementCountCollection length equals the dedicated count property.
console.log(document.children.length);
console.log(document.childElementCount);
console.log(document.children.length === document.childElementCount);Use children when you need the elements; use childElementCount when you only need the number.
childNodesShow that non-element nodes inflate childNodes but not children.
console.log("children.length:", document.children.length);
console.log("childNodes.length:", document.childNodes.length);
// childNodes often larger (includes doctype)Prefer children when you only care about element children at the document root.
body.childrenDocument children are almost always just html; body children reflect page structure.
console.log("document:", document.children.length);
console.log("body:", document.body.children.length);
for (const el of document.body.children) {
console.log(el.tagName.toLowerCase());
}For lists and layout containers, use Element.children on the parent element—not on Document.
html.children.length before using children[0].document.documentElement when you only need the html root.document.children Fits the DOMParser attaches doctype and builds the tree.
<html> becomes a childRoot element is a direct child of Document.
children filters elementsDoctype/comments ignored — collection is typically [<html>].
document.children updates if direct element children change.
HTMLCollection — mutate the DOM to change its contents.length === 0).Document.children is marked Baseline Widely available on MDN (since October 2017). Logos use the shared browser-image-sprite.png sprite from this project.
Live HTMLCollection of direct element children on Document — typically just the html root.
Bottom line: Use document.children for document-root element children. For lists and containers inside the page, use Element.children on the specific parent node.
Document.children gives you a live list of element nodes directly under the document—almost always just <html> on standard pages. Use it to understand document-root structure; use Element.children for everyday container listing.
Continue with compatMode, ownerDocument, Element children, or the JavaScript hub.
document.documentElement when you only need the html rootelement.children for container/list childrenchildren over filtering childNodes manuallylength before indexing if the document may be unusualdocument.children on normal pagesdocument.childrendocument.childrendocument.childrenLive element-child collection — usually just the html root.
HTMLCollection
APIbaseline
Standard[<html>]
MDNchildNodes
CompareElement.children
Use casechildren is a live collection: if the document’s direct element children change, the same HTMLCollection object updates automatically. You do not need to re-query document.children to see the new length.
Learn how to detect quirks mode vs standards mode.
6 people found this page helpful