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 thedoucment.headproperty are as follows:Line 7: The
<button>tag listens for theonclickevent and triggers thegetHead()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 thegetHead()method is made up of the following instructions:Line 13: This line uses the
document.headproperty and assigns the return value to the variablehead.Line 14–15: Here, we use the
document.getElementById()method to fetch the placeholder<p>tag. Then, with the help of theinnerTextandinnerHTMLproperties, we render content inside the<p>tag.
Note: To read more on the
document.getElementbyId()method and theinnerHTML,innerTextproperties, please refer to the following links:
Free Resources
