JavaScript Document head Property

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

Definition

Document.head is a read-only property that returns the HTMLHeadElement for the current document — the DOM node for <head> (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.head. Start with this line.

JavaScript
document.head
CallWhat it does
document.headPrimary signature.

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

Library declarations
JavaScript
document.head

Parameters

ParameterDescription
HTMLHeadElementRequired. The <head> node returned
Child tagsOptional. meta, link, script, title, …

Return Value

Return ValueDescription
*HTMLHeadElement

JavaScript Examples

Example 1 — Read head and Compare (MDN)

Log the head node and confirm it matches querySelector("head").

JavaScript
const theHead = document.head;

console.log(theHead.tagName);  // "HEAD"
console.log(theHead === document.querySelector("head"));  // true
Try It Yourself

How It Works

  1. Grab the node. document.head is the <head> element.
  2. Check tagName. For HTML it is the uppercase string "HEAD".
  3. Compare with a selector. On a normal page both expressions point to the same object.
  4. Prefer document.head. Shorter and clearer than querySelector("head").

Example 2 — Append a meta Tag

Create a meta element and append it to document.head.

JavaScript
const meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#111111";
document.head.appendChild(meta);

console.log(meta.parentNode === document.head);  // true
console.log(meta.name);  // "theme-color"
Try It Yourself

How It Works

  1. Create the element. createElement("meta") builds a new node.
  2. Set attributes. name and content configure the meta tag.
  3. Append to head. appendChild places it inside <head>.
  4. Verify parent. parentNode === document.head confirms the insert.

Example 3 — Count Head Children

See how many element children live under document.head.

JavaScript
const head = document.head;

console.log(head.childElementCount);
console.log(head.children[0] && head.children[0].tagName);
Try It Yourself

How It Works

  1. Use the head node. Store document.head in a variable.
  2. Count element children. childElementCount ignores text nodes.
  3. Peek at the first child. Often TITLE, META, or LINK.
  4. Explore further. Loop head.children when you need every tag name.
Compatibility

Browser Support

Document.head is Baseline Widely available (MDN: since June 2018). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

Document.head

Read-only HTMLHeadElement accessor — supported across modern browsers for years.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
document.head Excellent

Bottom line: Safe for production. Use document.head to reach <head>, then createElement + appendChild for meta/link/script tags. Prefer document.title for the title string.

Frequently Asked Questions

The HTMLHeadElement of the current document — the DOM node for the <head> element (MDN).
No. MDN marks Document.head as Baseline Widely available (since June 2018). It is not Deprecated, Experimental, or Non-standard.
No. The property is read-only. Assigning fails silently in non-strict mode, or throws a TypeError in strict mode (MDN).
For normal HTML documents, yes. MDN’s example shows document.head === document.querySelector('head') is true.
document.head is the <head> section (metadata, title, styles, scripts). document.body is the visible page content container.
When you need to add or read meta tags, link stylesheets, inject scripts, or work with children of <head> from JavaScript.

Next: hidden

Learn the Document property that reports whether the page is hidden.

hidden 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 fullscreenEnabled Property JavaScript Document hidden Property