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

The document.title property in DOM

In this Answer, we will learn about DOM's document.title property. This property retrieves and sets the title of an HTML document. The title is the text enclosed in <title> tags that are present in <head> section of an HTML document.

The primary use of the <title> tag is to specify the web page's title so that search engines can fetch pages efficiently according to the user searches.

Note: To read more on the <title> and <head> elements of HTML, please refer to the following links:

Syntax


//retrieve title enclosed in <title> tags
document.title

//set title of the HTML document
document.title = newTitle

Here, newTitle is a string that replaces the existing title of the document and sets it to this value given by the user.

Return value

The return value of this property is a string that represents the title of the HTML document.

Code

The code given below demonstrates the use of the document.title property. After we click "Run," we will have two buttons that will help us set and retrieve the title of our HTML web page:

Explanation

The explanation that follows from the code widget above is given below:

  • Line 3: This line contains <title> tags that define the title of our web page, and it is hardcoded for now.

  • Lines 6–11: In this code snippet, we have a <div> tag that encapsulates the page's content as seen in the output tab. The content is composed of the following HTML elements:

    • Line 7: Here, we use the <img> tag to render the logo of Educative.

    • Lines 8–9: These lines contain two buttons that are rendered using HTML <button> tags. These buttons set and fetch the title of the HTML document.

    • Line 10: This is a placeholder <p> tag that will tell the reader that the title has been successfully set to the new value by displaying appropriate text.

The <script> tags present on lines 12 and 22 enclose our methods fetchTitle() and setTitle() respectively. The body of both the methods is described as follows:

  • Lines 13–15: These lines define the body of our fetchTitle() function. Here, we only use the document.title property to fetch the current title of the HTML document and display it using a simple JavaScript alert(). More details on alert() method can be found in this Answer.

  • Lines 16–21: These lines of code make up the body of our setTitle() method, which can be broken down into the following statements:

    • Line 17: We assign a title of our choice using the document.title property.

    • Line 18: We fetch the placeholder <p> tag using document.getElementById() method.

    • Line 19: We use the innerHTML property to populate the <p> tag with a success message, so the reader is made aware of the change.

    • Line 20: Here, we use a simple JavaScript alert() to display the newly assigned title of our HTML document.

Note: To read more about the document.getElementById() and innerHTML properties of JavaScript, please refer to the following links:

Copyright ©2024 Educative, Inc. All rights reserved