Document.title() use in JavaScript?

Front End Technology Javascript Web Development

The document's current title can be obtained or changed using the document.title attribute. When present, the value of the <title> is used by default.

You can change or get the current title of the document using the document.title attribute. By providing a new title as a string to this attribute, the page's title can be changed. The chosen title will immediately be reflected in the website's title.

In this article you will see two types of methods used to change or use Document.title() use in JavaScript

Using the document.title property − You may set or get the current title of the document using the document.title property. By passing the new title as a string towards this property, the title of the page could be modified. By doing this, the recommended title of the website will be changed.

Syntax

Following is the syntax of document.title property

newPageTitle = 'The title has changed!';
document.title = newPageTitle;

Value

A string with the title of the document in it. It includes the value of document.title if the title was modified by setting it. If not, the markup-specified title is present.

The new title of the paper is newTitle. The assignment has an impact on the document's return value. title, the title that is published for the document, such as in the window or tab's titlebar, as well as having an impact on the page's DOM, such as the content of the <title> element in an HTML document.

Example 1

Before proceeding further let us understand how Document.title is written to execute in this example.


<!DOCTYPE html>
<html>
<title>Document.title() use in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // displays "Document.title() use in JavaScript - TutorialsPoint"
      document.write(document.title +'<br>');
      document.title = "Title has been changed!";
      document.write(document.title); // displays "Title has been changed!"
   </script>
</body>
</html>

Note − You can see the changed title on browser.

Example 2

Using the document.title property − In this example let us understand how to use javascript to dynamically change a document's title.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
      Describes how to use JavaScript to dynamically modify a web page's title.
   </title>
</head>
<body style="text-align:center">
   <h1 style="color: rgba(15, 15, 151, 0.839)">
      Tutorialspoint
   </h1>
   <b>
      Once you click the button you will see the document/page title will be changed dynamically.
   </b>
   <p>
      Click on the button: "Tutorialspoint is changed title!"
   </p>
   <button onclick="switchTitle()">
      Change Page Title
   </button>
   <script type="text/javascript">
      function switchTitle() {
         switchTitle = 'Tutorialspoint is changed title!';
         document.querySelector('title').textContent = switchTitle;
      }
   </script>
</body>
</html>

Note − You can see the changed title on browser.

Using querySelector() Method − To choose specific document elements, utilise the document.querySelector() method. The title element could be chosen by including it as a parameter in the selection. The page's current title element will be returned by this. A node's particular text content is returned through an element's ‘textContent’ attribute. By providing a string as the new title's ‘textContent’ property value, it is possible to update the page's title. The desired title will be used as the website's new title as a result.

Syntax

Following is the syntax of querySelector() Method

newPageTitle = 'The title has changed!';
document.querySelector('title').textContent = newPageTitle;

Example 3

Using querySelector() Method − In this example let us understand how to use javascript document.querySelector() method that will return the current title element of the page.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
      Describes how to use JavaScript that will return the current title element of the page.
   </title>
</head>
<body style="text-align:center">
   <h1 style="color: rgba(15, 15, 151, 0.839)">
      Tutorialspoint
   </h1>
   <b>
      Once you click the button you will see the document/page title will be changed dynamically.
   </b>
   <p>
      Click on the button: "Tutorialspoint is changed title!"
   </p>
   <button onclick="switchTitle()">
      Change Title
   </button>
   <script type="text/javascript">
      function switchTitle() {
         newDocTitle = 'Tutorialspoint is changed title!';
         document.querySelector('title').textContent = newDocTitle;
      }
   </script>
</body>
</html>

Note − You can see the changed title on the browser.

Manisha Patil

Updated on: 23-Aug-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started