JavaScript Document children Property

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

Definition

Document.children is a read-only live HTMLCollection of the document’s direct child elements (MDN). For HTML documents this is usually just the root <html> element.

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

Syntax

Use document.children. Start with this line.

JavaScript
document.children
CallWhat it does
document.childrenPrimary signature.

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

Library declarations
JavaScript
document.children

Parameters

ParameterDescription
childrenRequired. Live HTMLCollection of direct element children
[i] / item(i)Optional. Read one child by index

Return Value

Return ValueDescription
*The current value of document.children.

JavaScript Examples

Example 1 — Inspect document.children

Log length, first tag name, and collection type (MDN pattern).

JavaScript
console.log(document.children.length);           // 1
console.log(document.children[0].tagName);       // "HTML"
console.log(document.children.constructor.name); // "HTMLCollection"
Try It Yourself

How It Works

  1. Read the collection. document.children is a live HTMLCollection.
  2. Check length. Typical HTML documents report 1.
  3. Inspect the child. Index 0 is usually the <html> root.
  4. Confirm the type. constructor.name shows HTMLCollection.

Example 2 — Index, item(), and documentElement

Access the same root element three equivalent ways.

JavaScript
const first = document.children[0];
const viaItem = document.children.item(0);

console.log(first === viaItem);                 // true
console.log(first === document.documentElement); // true
Try It Yourself

How It Works

  1. Bracket access. children[0] returns the first element child.
  2. item() access. item(0) returns the same node (or null if out of range).
  3. Root shortcut. On normal HTML pages, that node is document.documentElement.
  4. Identity checks. Both comparisons are true because they point to one object.

Example 3 — children vs childNodes

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

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

How It Works

  1. Element filter. children keeps only element nodes.
  2. Full child list. childNodes includes doctype, text, and comments.
  3. Typical gap. Doctype + html → childNodes.length is often 2.
  4. Pick the API. Want elements only? Use children / childElementCount.
Compatibility

Browser Support

Document.children is Baseline Widely available on MDN (since October 2017). It is part of the ParentNode mixin shared with Element and DocumentFragment.

✓ Baseline · Widely available

Document.children

Live HTMLCollection of direct element children on a Document — usually just <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
children Excellent

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

Frequently Asked Questions

A live HTMLCollection of the document's direct child elements only. On a typical HTML page it usually contains just the root html element.
No. MDN marks Document.children as Baseline Widely available (since October 2017). It comes from the ParentNode mixin on Document.
Same property name and behavior, different node: document.children lists the document's direct element children; element.children lists an element's direct element children. Use Element.children for containers inside the page.
children includes only Element nodes. childNodes includes every node type — elements, text, comments, and often the doctype on Document.
On a normal HTML page, yes — children[0] is usually the same node as document.documentElement (the html element).
No. It is read-only. You can read length and items; change the tree by adding or removing nodes, not by assigning a new collection.

Next: compatMode

Learn whether the document is in standards or quirks mode.

compatMode 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 childElementCount Property JavaScript Document compatMode Property