Document.head is a read-only instance property that returns the <head> element as an HTMLHeadElement. Learn MDN’s id / querySelector example, how to append meta and link tags, how it differs from document.body, and five examples with try-it labs.
Read-only
HTMLHeadElement
<head>
document.body
meta / link
Baseline widely
Every HTML page has a <head> section for metadata: <title>, <meta>, stylesheets, and scripts. In JavaScript, that node is document.head.
MDN: the read-only property returns the <head> element of the current document as an HTMLHeadElement. It is the standard shortcut instead of always calling document.querySelector("head").
Use document.head for page metadata and resources loaded from the head. Use document.body for visible content the user sees on the page.
Related Document tutorials: body, documentElement, Document constructor.
Document.headA read-only instance property on Document. Its value is the document’s HTMLHeadElement.
<head> element (MDN).TypeError in strict mode (MDN).document.querySelector("head") (MDN).document.head, but you can append to it with DOM methods.document.headAn HTMLHeadElement representing the document’s <head> (MDN).
const theHead = document.head;
console.log(theHead.id); // "my-document-head"
console.log(theHead === document.querySelector("head")); // true| Goal | Code / note |
|---|---|
| Get head element | document.head |
| Read id / tagName | document.head.id |
| Append meta tag | document.head.appendChild(meta) |
| Append stylesheet | document.head.appendChild(link) |
| Same as querySelector? | document.head === document.querySelector("head") |
| MDN status | Baseline Widely available (since Jun 2018) |
Four facts about document.head.
HTMLHeadElementRead-only
<head>Metadata
noStrict throws
baselineWidely available
head vs bodydocument.head | document.body | |
|---|---|---|
| Element | <head> | <body> |
| Visible? | No (metadata) | Yes (content) |
| Read-only ref? | Yes (MDN) | No — settable |
| Typical children | meta, link, title, script | div, p, main, etc. |
Examples follow MDN Document: head. You can mutate head contents even though the property itself is read-only.
Read the head element and compare with querySelector.
document.headLog the id and confirm it matches querySelector("head").
const theHead = document.head;
console.log(theHead.id);
console.log(theHead === document.querySelector("head"));MDN shows both accessors return the same HTMLHeadElement in normal HTML documents.
<meta> TagAdd viewport or description metadata at runtime.
const meta = document.createElement("meta");
meta.name = "description";
meta.content = "Added from JavaScript via document.head";
document.head.appendChild(meta);
console.log(document.head.querySelector('meta[name="description"]').content);The property is read-only, but the head node is a normal parent you can append to.
Inject resources and inspect what lives in the head.
<link>Load CSS dynamically through the head.
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://example.com/theme.css";
document.head.appendChild(link);
console.log("stylesheets in head:", document.head.querySelectorAll('link[rel="stylesheet"]').length);Libraries and SPAs often inject link or script tags this way instead of editing static HTML.
Access the <title> inside document.head.
const titleEl = document.head.querySelector("title");
console.log(titleEl ? titleEl.textContent : "(no title)");
// You can also use document.title for the same string
console.log(document.title);document.title is a convenience shortcut, but the title node lives under document.head.
Inventory meta, link, script, and style tags.
const tags = [...document.head.children].map((el) => el.tagName);
console.log(tags.join(", "));
console.log("child count:", document.head.childElementCount);Useful when debugging which scripts or styles loaded into the head.
<link>.<title> for SPA route changes.document.head Fits the DOMIt builds <html>, then <head> and <body>.
Returns the live HTMLHeadElement for that document (MDN).
Use appendChild, querySelector, or children on the head node.
You cannot assign a new head element to document.head (MDN). Change contents, not the reference.
document.querySelector("head") in HTML documents (MDN).document.body for the full page structure.Document.head is marked Baseline Widely available on MDN (since June 2018). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only reference to the HTML head element — standard for metadata, styles, and scripts.
Bottom line: Use document.head to access and update head contents. Prefer appendChild for meta, link, and script tags instead of replacing the entire head.
Document.head is the standard handle for the <head> element. Use it to read metadata, append meta/link/script tags, and inspect head resources—while remembering the property itself is read-only.
Continue with hidden, body, documentElement, or the JavaScript hub.
document.head instead of repeated querySelector("head")document.body for full page structuredocument.title for quick title reads/writesdocument.head — it is read-only (MDN)document.documentElement (the <html> root)document.headYour shortcut to the document’s metadata section.
HTMLHeadElement
API<head>
Metadataref only
MDNmeta / link
Contents OKbody
Head vs contentBrowsers create a <head> element even if your HTML omits it. That means document.head is almost always available on HTML documents, though you should still write explicit head markup for charset, viewport, and title.
Learn how to detect background tabs with document.hidden.
6 people found this page helpful