Document.body is a standard instance property that references the <body> element holding your page content. Learn how to read it, append nodes, style backgrounds, understand MDN’s replace-body example, and handle edge cases—with five examples and try-it labs.
Instance property
HTMLBodyElement
Yes (careful)
Page content
documentElement
Baseline widely
Every normal HTML page has a <body> element between <head> and the closing </html>. Paragraphs, buttons, images, and app roots live inside the body. document.body is the JavaScript shortcut to that element.
It is one of the first DOM properties beginners encounter—often right after document.getElementById. You use it to append content, toggle page classes, read scroll position, and set styles such as backgroundColor (the modern replacement for deprecated document.bgColor).
MDN: document.body is the element that contains the content for the document. In frameset documents it may return a frameset element instead of body.
Related Document tutorials: activeElement, ownerDocument, appendChild().
Document.bodyA getter/setter instance property on Document. Reading it returns the current HTMLBodyElement (or HTMLFrameSetElement in frameset documents), or null if no such element exists.
HTMLBodyElement | HTMLFrameSetElement | null.document.body.children, scrollTop, classList.document.documentElement is the <html> element above body.document.bodyconsole.log(document.body.tagName); // "BODY"
console.log(document.body.id);const newBody = document.createElement("body");
newBody.id = "newBodyElement";
document.body = newBody; // replaces old body — removes its children| Goal | Code / note |
|---|---|
| Get body element | document.body |
| Append a node | document.body.appendChild(el) |
| Body background (modern) | document.body.style.backgroundColor |
| Toggle page class | document.body.classList.add("dark") |
| Scroll position | document.body.scrollTop (with documentElement in some browsers) |
| MDN status | Baseline Widely available |
Four facts about document.body.
HTMLBodyElementUsually
page contentVisible DOM
yesReplaces body
baselineStandard API
body vs documentElementdocument.body | document.documentElement | |
|---|---|---|
| Element | <body> | <html> |
| Contains | Page content | Entire document root |
| Can be null? | Yes (no body yet) | Essentially always present |
| Theme on | Body background, layout | Root font-size, lang, full-page CSS vars |
Examples follow MDN Document: body. Use View Output or Try It Yourself for each case.
Read the body element and use it for everyday DOM tasks.
document.body.id (MDN)Access a property on the body element directly.
// HTML: <body id="oldBodyElement"></body>
console.log(document.body.id); // "oldBodyElement"
console.log(document.body.tagName); // "BODY"document.body is a live reference—mutations on it immediately affect the page.
appendChildAdd a new paragraph to the page content container.
const p = document.createElement("p");
p.textContent = "Hello from document.body!";
document.body.appendChild(p);See also Node.appendChild() for full append semantics and return values.
Body-level styles, MDN replace pattern, and null guards.
body.styleModern way to set page background color on the body element.
document.body.style.backgroundColor = "#f0f9ff";
document.body.style.color = "#0c4a6e";
console.log(document.body.style.backgroundColor);Prefer CSS rules in stylesheets for static themes; use body.style for runtime toggles (dark mode, etc.).
Assign a new body element—MDN warns this removes existing children.
const newBodyElement = document.createElement("body");
newBodyElement.id = "newBodyElement";
document.body = newBodyElement;
console.log(document.body.id); // "newBodyElement"Rare in production apps. Use only when you understand MDN’s warning about wiping body contents.
body May Be MissingDefensive check before scripts that run during early parsing.
if (document.body) {
document.body.classList.add("js-ready");
console.log("body ready:", document.body.tagName);
} else {
console.log("body not available yet");
}Scripts in <head> without defer may run before <body> exists. Use DOMContentLoaded or place scripts at end of body when possible.
document.body.dark class on body for site-wide dark mode.overflow: hidden on body when a modal opens.#app id).document.bgColor with document.body.style.backgroundColor.document.body Fits the DOMBuilds html → head + body tree.
document.body availableProperty references the live HTMLBodyElement.
Append nodes, toggle classes, or set inline styles.
Changes through document.body render immediately in the browser.
frameset element instead of body.null if no body element exists yet.document.documentElement for root-level styling vs content-level styling.Document.body is marked Baseline Widely available on MDN (since May 2018). Logos use the shared browser-image-sprite.png sprite from this project.
Standard reference to the HTML body element — essential for page content, styling, and DOM manipulation.
Bottom line: Use document.body to access and update page content. Prefer dedicated mount nodes and CSS for structure — avoid replacing the entire body unless you fully understand MDN's warning.
Document.body is the standard gateway to your page’s visible content. Use it to append elements, apply body-level classes, and coordinate layout—while remembering that replacing the body wipes its children.
Continue with characterSet, ownerDocument, bgColor, appendChild(), or the JavaScript hub.
document.body for page-wide classes and scroll lockdocument.body before early head scripts runbody for static page backgrounds#app mount for SPA frameworksdocument.body = newBody casually in apps<head> without waitingbody with documentElementdocument.bgColor instead of CSSdocument.bodyStandard body reference — your page content container.
HTMLBodyElement
APIbaseline
Standardpage content
DOMwipes children
MDNbody.style
CSSOMMany accessibility guidelines recommend moving focus to document.body or a main landmark after SPA route changes so screen-reader users hear the new page content. The body is often the fallback active element when nothing else is focused.
Learn how to read the document encoding label (such as UTF-8).
6 people found this page helpful