What is the use of the document.head property in DOM?

In this Answer, we look at the DOM's document.head property. This property returns the <head> element and all the child elements enclosed in it. The <head> tag contains all the necessary data relevant to the HTML document, such as styling, character set, scripts, etc.

Note: To read more on HTML <head> tags, please refer to this Answer.

Syntax

Now that we're aware of the essential use of this property, let's look at the relevant syntax:

document.head

Here, the document refers to the HTML page rendered in the browser.

Return value

The return value of this property is of type node, representing the document's <head> element.

Note: If an HTML document contains multiple <head> elements, then this property only returns the first one.

Code example

The code example below demonstrates how we can use the syntax mentioned above to access the <head> elements in our HTML web page:

Explanation
  • Line 2–4: In these lines, we have our <head> tag. This comprises a <title> tag that sets the title of our HTML document. To read more on the <title> element, please refer to this Answer.
  • Lines 6–9: This code contains our <div> tag, which encapsulates the content of our web page. The elements that help us understand the functionality of the doucment.head property are as follows:
    • Line 7: The <button> tag listens for the onclick event and triggers the getHead() method.
    • Line 8: Here, we have a placeholder <p> tag that is populated by the content enclosed in the <head> tag.
  • Lines 10–17: This piece of code snippet encloses the getHead() method inside HTML <script> tags. The body of the getHead() method is made up of the following instructions:
    • Line 13: This line uses the document.head property and assigns the return value to the variable head.
    • Line 14–15: Here, we use the document.getElementById() method to fetch the placeholder <p> tag. Then, with the help of the innerText and innerHTML properties, we render content inside the <p> tag.
Note: To read more on the document.getElementbyId() method and the innerHTML, innerText properties, please refer to the following links:
Free Resources
Copyright ©2025 Educative, Inc. All rights reserved