Document.documentElement is a read-only instance property that returns the root Element of the document—for HTML, the <html> element. Learn how it differs from document.body, how to read lang / dir / classes on the root, and five examples with try-it labs.
Read-only
Element
<html>
document.body
lang / class
Baseline widely
Every HTML page has a tree that starts with the <html> tag. That element wraps <head> and <body>. In the DOM, that root element is document.documentElement.
MDN: the property returns the Element that is the root of the document (for HTML, the <html> element). For non-empty HTML documents it is always that element; for XML it is whatever element is the document root.
Theme classes (dark), lang, and dir are often set on <html>. document.documentElement is the standard handle for those page-wide attributes.
Related Document tutorials: doctype, body, dir, Document constructor.
Document.documentElementA read-only instance property on Document. Its value is an Element—the document root.
<html> element (MDN).<head> and <body> (see MDN’s childNodes example).document.querySelector("html").document.documentElementAn Element object — the root element of the document (MDN).
const rootElement = document.documentElement;
const firstTier = rootElement.childNodes;
// NodeList of direct children (e.g. head and body)
for (const child of firstTier) {
// do something with each direct child of the root element
}| Goal | Code / note |
|---|---|
| Get root | document.documentElement |
| Tag name | document.documentElement.tagName → "HTML" |
| Set language | document.documentElement.lang = "en" |
| Theme class | document.documentElement.classList.add("dark") |
| Direction | document.documentElement.dir or document.dir |
| MDN status | Baseline Widely available |
Four facts about document.documentElement.
ElementRoot node
read-onlyNo setter
<html>Usual root
baselineStandard API
| Task | Typical code |
|---|---|
| Read page language | document.documentElement.lang |
| Toggle dark mode | classList.toggle("dark") on the root |
| Scroll metrics | document.documentElement.scrollTop (with caveats vs body) |
| CSS custom properties | style.setProperty("--brand", "#…") on the root |
Examples follow MDN Document: documentElement. Use View Output or Try It Yourself for each case.
Identify the root and walk its direct children (MDN).
Confirm tag name and that it is the <html> element.
const root = document.documentElement;
console.log(root.tagName); // "HTML"
console.log(root === document.querySelector("html")); // truetagName for HTML elements is typically uppercase in HTML documents.
List child node names under documentElement.
const rootElement = document.documentElement;
const names = [];
for (const child of rootElement.childNodes) {
if (child.nodeType === Node.ELEMENT_NODE) {
names.push(child.nodeName);
}
}
console.log(names.join(", "));
// often "HEAD, BODY"childNodes also includes text/whitespace nodes—filter to ELEMENT_NODE when you only want tags.
Everyday uses of the root element handle.
documentElement vs bodyRoot and body are different nodes in the same tree.
console.log("root:", document.documentElement.tagName);
console.log("body:", document.body.tagName);
console.log(
"body is child of root:",
document.body.parentElement === document.documentElement
);Put page chrome / theme on the root; put content and most UI inside body.
lang on the RootPage language belongs on <html lang>.
const html = document.documentElement;
console.log("Before:", html.lang);
html.lang = "en-US";
console.log("After:", html.lang);Updating lang helps accessibility tools and can affect hyphenation / fonts in some engines.
<html>Toggle a dark-mode class on the document root.
const root = document.documentElement;
root.classList.toggle("dark");
console.log("Has dark:", root.classList.contains("dark"));
console.log("className:", root.className);CSS like html.dark { … } or :root.dark can theme the whole page from one class.
lang and pair with dir.:root / html.data-* attributes on <html> for global config.documentElement.scrollTop / clientHeight.The document object owns the whole tree.
document.doctype may appear before the root element.
document.documentElement — <html> on web pages.
Direct element children are usually head then body.
Element.<html> element (MDN).Document.documentElement is marked Baseline Widely available on MDN (since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only root Element of the document — the
element on HTML pages.Bottom line: Use document.documentElement to access the page root. Prefer it for lang, dir, and theme classes; use document.body for page content.
Document.documentElement is the standard way to reach the document’s root element—almost always <html>. Use it for page-wide attributes and classes, and remember it is different from document.body.
Continue with documentURI, body, doctype, or the JavaScript hub.
documentElementclassList instead of rewriting className blindlydocumentElement over hard-coded querySelector("html")body; keep document chrome on the roothtmldocument.documentElementdocument.bodychildNodes contains only elements<html>body can be null very early in parsingdocument.documentElementThe document root Element — usually <html>.
root Element
APIbaseline
Standardread-only
DOM<html>
Typicaldocument.body
CompareIn CSS, the :root pseudo-class selects the same element as document.documentElement in HTML documents. That is why global custom properties are often declared under :root { }.
Learn how to read the document location as a string.
6 people found this page helpful