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 thedocument.titleproperty to fetch the current title of the HTML document and display it using a simple JavaScriptalert(). More details onalert()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.titleproperty.Line 18: We fetch the placeholder
<p>tag usingdocument.getElementById()method.Line 19: We use the
innerHTMLproperty 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()andinnerHTMLproperties of JavaScript, please refer to the following links:
Free Resources
