JavaScript Document firstElementChild Property

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

Definition

Document.firstElementChild is a read-only property that returns the document’s first child Element, or null if there are none (MDN). For HTML documents, this is usually 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.firstElementChild. Start with this line.

JavaScript
document.firstElementChild
CallWhat it does
document.firstElementChildPrimary signature.

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

Library declarations
JavaScript
document.firstElementChild

Parameters

ParameterDescription
Writable?Optional. Read-only

Return Value

Return ValueDescription
*Element or null

JavaScript Examples

Example 1 — Root <html>

MDN: on HTML documents, the first element child is usually <html>.

JavaScript
const root = document.firstElementChild;
console.log(root.tagName);
console.log(root === document.documentElement);
Try It Yourself

How It Works

  1. Read the property. Returns the first child Element (MDN).
  2. Log tagName. On HTML pages this is usually "HTML".
  3. Compare to documentElement. Same node for a normal document root.
  4. Prefer documentElement when your intent is specifically “the root element.”

Example 2 — firstChild vs firstElementChild

Doctype and other non-elements are skipped by firstElementChild.

JavaScript
const anyNode = document.firstChild;
const firstEl = document.firstElementChild;

console.log(anyNode && anyNode.nodeName);
console.log(anyNode && anyNode.nodeType);
console.log(firstEl && firstEl.tagName);
Try It Yourself

How It Works

  1. Read firstChild. Any node type — often the doctype.
  2. Check nodeType. DocumentType is 10.
  3. Read firstElementChild. Skips to the first Element.
  4. Use the right API. Need an element? Prefer firstElementChild.

Example 3 — Element.firstElementChild

Same ParentNode idea on a list — MDN’s <ul> pattern.

JavaScript
const list = document.getElementById("list");
console.log(list.firstElementChild.textContent);
// "First (1)"
Try It Yourself

How It Works

  1. Select a container. Here, a <ul> with three items.
  2. Read firstElementChild. First child that is an element.
  3. Whitespace is skipped. Text nodes between tags do not count.
  4. Same property name on Document and Element — different parent node.
Compatibility

Browser Support

Document.firstElementChild is marked Baseline Widely available on MDN (since April 2018). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Document.firstElementChild

Read-only first child Element of the document — usually the root html element.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer Legacy support varies
Partial
Document.firstElementChild Baseline support

Bottom line: Safe to use in modern browsers. See the MDN Document.firstElementChild reference. Prefer documentElement when you specifically mean the HTML root.

Frequently Asked Questions

The document's first child Element, or null if there are no child elements. For HTML documents this is usually the root <html> element (MDN).
No. MDN marks Document.firstElementChild as Baseline Widely available (since April 2018). It is a standard ParentNode property on Document.
firstChild can return any node type — often the DocumentType (doctype). firstElementChild skips non-element children and returns the first Element only.
On normal HTML pages, yes — both typically refer to the <html> element. Prefer document.documentElement when you specifically mean the document root.
Yes. Element.firstElementChild returns the first element child of that element (for example the first <li> inside a <ul>).
When the document has no child elements. Typical HTML pages always have at least <html>, so you usually get an Element.

Next: Document fonts

Learn how document.fonts exposes the FontFaceSet for the page.

fonts 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 fgColor Property JavaScript Document fonts Property