Document.firstElementChild is a read-only instance property that returns the document’s first child Element, or null. For HTML this is usually the root <html> element. Learn how it differs from firstChild and documentElement, plus five examples with try-it labs.
Read-only
Element | null
Usually <html>
firstChild
documentElement
Baseline widely
A Document node can have several kinds of children: a doctype, comments, and the root element. When you only care about the first element child, use document.firstElementChild.
MDN: for HTML documents this is usually the only child element—the root <html>. For walking children of a specific tag (like the first <li> in a list), use Element.firstElementChild instead.
document.firstChild often returns the DocumentType from <!DOCTYPE html>, not <html>. firstElementChild skips non-element nodes so beginners get the element they expect.
Related Document tutorials: documentElement, doctype, body, Document constructor.
Document.firstElementChildA read-only instance property from the ParentNode mixin on Document. It returns the first child that is an Element, or null (MDN).
Element | null.<html> (MDN).el.firstElementChild for nested trees.document.firstElementChildAn Element object, or null (MDN).
document.firstElementChild;
// returns the root <html> element, the only child of the document| Goal | Code / note |
|---|---|
| First element under document | document.firstElementChild |
| Root html (preferred name) | document.documentElement |
| Tag name check | document.firstElementChild.tagName → "HTML" |
| Same object as documentElement? | === document.documentElement |
| First child of a list | ul.firstElementChild |
| MDN status | Baseline Widely available |
Four facts about document.firstElementChild.
Element | nullRead-only
<html>Usually
doctypeNon-elements
baselineStandard API
firstChild vs firstElementChilddocument.firstChild | document.firstElementChild | |
|---|---|---|
| Node kinds | Any (doctype, text, comment, element) | Elements only |
| Typical HTML page | Often DocumentType | <html> |
Safe for .tagName? | Not always | Yes when not null |
| Beginner tip | Easy to confuse | Prefer for element work |
Examples follow MDN Document: firstElementChild. Use View Output or Try It Yourself for each case.
Get the document’s first element child and compare sibling APIs.
<html> ElementOn a normal HTML page, the only element child of the document is <html>.
const root = document.firstElementChild;
console.log(root.tagName); // "HTML"
console.log(root === document.documentElement); // trueMDN: returns the root <html> element, the only child of the document (for HTML).
firstChild vs firstElementChildSee why the element-only property is safer for beginners.
const anyNode = document.firstChild;
const firstEl = document.firstElementChild;
console.log("firstChild nodeType:", anyNode && anyNode.nodeType);
console.log("firstChild nodeName:", anyNode && anyNode.nodeName);
console.log("firstElementChild:", firstEl && firstEl.tagName);
// nodeType 10 = DOCUMENT_TYPE_NODE (doctype) on many pagesDoctype nodeName can look like "html", but it is not an Element—use firstElementChild when you need .tagName / attributes.
Same object checks and the Element-level twin.
documentElement?On normal HTML pages both refer to the root element.
console.log(
document.firstElementChild === document.documentElement
); // true on typical HTML documents
console.log(document.documentElement.lang || "(no lang)");Prefer document.documentElement in app code when your intent is “the document root.”
firstElementChildTheme / language attributes live on <html>.
const html = document.firstElementChild;
if (html) {
console.log("tag:", html.tagName);
console.log("lang:", html.getAttribute("lang"));
console.log("class:", html.className);
}Always null-check if you write libraries that might run against empty documents.
Element.firstElementChild Inside the TreeMDN points to the Element twin for children of specific elements.
const list = document.getElementById("list");
console.log(list.firstElementChild.textContent);
// "First (1)" — skips whitespace text nodes between tagsPretty-printed HTML often inserts text nodes; firstElementChild ignores them and returns the first real element.
firstChild when you need an Element.lang / classes (or use documentElement).el.firstElementChild for the first item.<!DOCTYPE html> becomes a DocumentType node under the Document.
The <html> element is the first (and usually only) element child.
ParentNode walks children until it finds an Element (or returns null).
Ready for tagName, attributes, and further DOM walks.
<html> (MDN).Element.firstElementChild for children of specific elements (MDN).document.documentElement when your intent is clearly “the root element.”Document.firstElementChild is marked Baseline Widely available on MDN (since April 2018). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only first child Element of the document — usually the root <html> element.
Bottom line: Use firstElementChild when you need the first Element under Document. Prefer document.documentElement for root-html intent, and Element.firstElementChild for nested trees.
Document.firstElementChild is the standard way to read the document’s first element child—almost always <html> on HTML pages. Use it to avoid doctype/text-node surprises from firstChild, and reach for documentElement when you mean the root by name.
Continue with fonts, documentElement, doctype, or the JavaScript hub.
firstElementChild when you need an Elementdocument.documentElement for root-html intentel.firstElementChild inside components / listsfirstChild when teaching node typesfirstChild is always <html>firstElementChild (read-only)querySelector for deep lookupsdocument.firstElementChildFirst Element under Document — usually <html>.
Element | null
APIbaseline
Standard<html>
Usuallydoctype / text
SafedocumentElement
Same rootfirstElementChild, lastElementChild, children, and childElementCount all come from the same ParentNode mixin—so Document, Element, and DocumentFragment share the same “element children” vocabulary.
Learn document.fonts and the FontFaceSet CSS Font Loading API.
6 people found this page helpful