HTML - DOM Document head Property

Quiz

The head property is associated with the HTML <head> element. It is used for returning the <head> element. If there are multiple head elements then it will return the first <head> element and if there is no head element then HTML adds an empty <head>. It is a read-only property.

Syntax

document.head;

Return Value

It returns head element of the document.

Examples of HTML DOM document 'head' Property

Given below are few examples showing use of head property.

Get the <head> Element

The following example illustrates use of head property to get head element of the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document head Property
    </title>
</head>
<body>
    <button onclick="fun()">Click me</button>
    <p id="head"></p>
    <script>
        function fun() {
            let tag = document.head.tagName;
            document.getElementById("head").innerHTML = tag;
        }
    </script>
</body>
</html>

Get the <head> Element

The following example illustrates use of head property to get head element of the HTML document without containing a head tag.

<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        This document does not have 
        any <head> element.
    </p>
    <button onclick="fun()">Click me</button>
    <p id="head"></p>
    <script>
        function fun() {
            let x = document.head.tagName;
            document.getElementById("head").innerHTML = x;
        }
    </script>
</body>
</html>

Alternate way to Get the <head> Element

This example illustrates to get the head element without using head property.

<!DOCTYPE html>
<html lang="en">
<body>
    <button onclick="fun()">
        Click me
    </button>
    <p id="head"></p>
    <script>
        function fun() {
            let x = document.getElementsByTagName("head")[0].tagName;
            document.getElementById("head").innerHTML = x;
        }
    </script>
</body>
</html>

Get the Title of the Document

The following example illustrates use of head property to get the title name of the documnent.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document head Property
    </title>
</head>
<body>
    <p>
        Click the button below to get the 
        Title of the document.
    </p>
    <button onclick="fun()">Click me</button>
    <p id="head"></p>
    <script>
        function fun() {
            let x = document.head.firstElementChild.innerHTML;
            document.getElementById("head").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
head	Yes 4	Yes 12	Yes 4	Yes 5	Yes 11

html_dom.htm

Print Page