Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to work with document.head in JavaScript?
In this tutorial, let us discuss how to work with the document's head in JavaScript.
The document.head property is a DOM Level 3 read-only feature that returns the <head> element of the current document. This property provides access to metadata elements like title, meta tags, stylesheets, and scripts.
The head tag contains document metadata including title, keywords, description, and stylesheets. Every HTML document should have a head section, though the opening and closing tags are optional in HTML.
Syntax
let headElement = document.head;
Return Value
The document.head property returns the HTML <head> element node, or null if no head element exists.
Basic Usage Example
Here's how to access the head element and its basic properties:
<html>
<head>
<title>Document Head Example</title>
<meta name="description" content="Learning document.head">
</head>
<body>
<h2>Working with document.head</h2>
<button onclick="showHeadInfo()">Show Head Info</button>
<div id="output"></div>
<script>
function showHeadInfo() {
let head = document.head;
let output = document.getElementById('output');
output.innerHTML = `
<p><strong>Tag Name:</strong> ${head.tagName}</p>
<p><strong>Child Count:</strong> ${head.childElementCount}</p>
<p><strong>Inner HTML:</strong> ${head.innerHTML}</p>
`;
}
</script>
</body>
</html>
Common Head Manipulation Methods
The head element supports standard DOM methods for adding and removing child elements:
<html>
<head>
<title>Dynamic Head Manipulation</title>
</head>
<body>
<h2>Adding Elements to Head</h2>
<button onclick="addMetaTag()">Add Meta Tag</button>
<button onclick="addStylesheet()">Add Stylesheet</button>
<div id="status"></div>
<script>
function addMetaTag() {
let meta = document.createElement('meta');
meta.name = 'author';
meta.content = 'JavaScript Tutorial';
document.head.appendChild(meta);
document.getElementById('status').innerHTML = 'Meta tag added successfully!';
}
function addStylesheet() {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);
document.getElementById('status').innerHTML = 'Stylesheet link added!';
}
</script>
</body>
</html>
Useful Head Properties and Methods
| Property/Method | Description | Example |
|---|---|---|
childElementCount |
Number of child elements | document.head.childElementCount |
innerHTML |
HTML content inside head | document.head.innerHTML |
appendChild() |
Add child element | document.head.appendChild(metaTag) |
querySelector() |
Find child element | document.head.querySelector('title') |
Practical Example: Managing Document Title
<html>
<head>
<title>Original Title</title>
</head>
<body>
<h2>Document Title Management</h2>
<input type="text" id="newTitle" placeholder="Enter new title">
<button onclick="updateTitle()">Update Title</button>
<button onclick="showCurrentTitle()">Show Current Title</button>
<div id="titleDisplay"></div>
<script>
function updateTitle() {
let newTitle = document.getElementById('newTitle').value;
if (newTitle) {
document.title = newTitle;
showCurrentTitle();
}
}
function showCurrentTitle() {
let titleElement = document.head.querySelector('title');
document.getElementById('titleDisplay').innerHTML =
`<p>Current title: <strong>${titleElement.textContent}</strong></p>`;
}
</script>
</body>
</html>
Browser Compatibility
The document.head property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. For older browsers, you can use document.getElementsByTagName('head')[0] as a fallback.
Conclusion
The document.head property provides direct access to the document's head element, enabling dynamic manipulation of metadata, stylesheets, and scripts. Use it for programmatically managing document properties and adding resources at runtime.
2K+ Views
