Document title javascript example

How to display the title of a document with JavaScript?

In this tutorial, we will understand two approaches to display the document’s title using JavaScript.

Using document.title Property

One of the most used methods in JavaScript to access an HTML document’s title is using a document.title property. In the following example, you will learn to get access to the title. After accessing the title in JavaScript, you can manipulate it and change the way it is displayed on a website.

Syntax

Here you can see how with the use onClick method, we can set the innerHTML of a paragraph within the document. The document.title is used to grab the title, and it displays the title on click of the specified button.

title.innerHTML = document.title;

Algorithm

Step 1 − Write a title in an HTML document file.

Step 2 − Create a button to get access to the title with the onClick method.

Step 3 − Make a paragraph tag where the grabbed title can be displayed.

Step 4 − Set the required variable for the different elements within the document.

Step 5 − Create a function for the button onClick.

Step 6 − Give the paragraph tag’s variable innerHTML using the document.title method.

Example 1

You can see below that how we got access to the document’s title without giving it any id or class in the HTML file. The document.title can be used to get access to the title.

html> head> title> This is the title accessed from the document /title> /head> body> h3> Please click the button to get the title of the document/h3> button id="titleBtn" onClick="titleButton()">Check Title/button> p id="result">/p> script> var paraTitle = document.getElementById('result'); function titleButton()  paraTitle.innerHTML = document.title; document.getElementById('titleBtn').style.visibility = 'hidden'; > /script> /body> /html> 
 

Using the etElementsByTagName() Method

Generally, we have to grab the title using JavaScript functions to manipulate the way it gets shown on different platforms. In this method, you will learn how to get the title using the document.getElementsByTagName() property. The method accepts a tag name as a parameter and returns a collection of all elements with a specified tag name.

Syntax

document.getElementsByTagName("title")[idx];

Here “title” is the parameter to the method.

The method will return a collection of all elements with the tag “title”.

We need to apply indexing to the received collection to get the different elements. Here idx is the index of the title. For example, to get the first title we set the idx to 0, and in the same way to get the second title we set the idx to 1.

Algorithm

Step 1 − Write something within the title tags of the HTML document.

Step 2 − Create button tags to be able to use the onClick method.

Step 3 − Create paragraph tags and give them an id to get access in JavaScript.

Step 4 − You can give all the important elements within the document an id or class.

Step 5 − Create a different variable that can grab the required elements.

Step 6 − Make a function onClick method.

Step 7 − The variable created for the paragraph should be given innerHTML using tagName() property.

Example 2

In this example, we will select the title by tag name. You will learn how to quickly get the title from the HTML document using the document.getElementsByTagName() method. We add two titles in an HTML document. We find both titles using two buttons.

html> head> title> This is the first title accessed using index 0. /title> title> This is the second title accessed using index 1./title> /head> body> h3>Getting the Title of the document using Tag Name. /h3> button id="titleBtn" onClick="titleButton()">Check First Title/button> button id="secondBtn" onClick="secondButton()">Check Second Title/button> p id="paraTitle"> /p> script> var paraTitle = document.getElementById('paraTitle'); function titleButton()  var title = document.getElementsByTagName("title")[0]; paraTitle.innerHTML = title.innerHTML; > function secondButton()  var title = document.getElementsByTagName("title")[1]; paraTitle.innerHTML = title.innerHTML; > /script> /body> /html> 
 

Here you can see we have added two buttons to show different titles within a document. Through this output, you can understand that adding 0 index after tagName() property can help in getting access to the first title.

Both document.title property and getElementByTagName() method is used to get access to a document’s title. You can experiment with both methods in JavaScript before choosing the preferred one. If you want to manipulate the behavior of the document’s title, then getting access to the title using JavaScript can be a good starting point.

Источник

Document: title property

The document.title property gets or sets the current title of the document. When present, it defaults to the value of the .

Value

A string containing the document‘s title. If the title was overridden by setting document.title , it contains that value. Otherwise, it contains the title specified in the element.

newTitle is the new title of the document. The assignment affects the return value of document.title , the title displayed for the document (e.g. in the titlebar of the window or tab), and it also affects the DOM of the document (e.g. the content of the element in an HTML document).

Examples

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Hello World!title> head> body> script> alert(document.title); // displays "Hello World!" document.title = "Goodbye World!"; alert(document.title); // displays "Goodbye World!" script> body> html> 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML DOM Document title

The title property sets or returns the title of the document.

Syntax

Return the title property:

Properties

Return Value

Related Pages

Browser Support

document.title is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Document.title() use in JavaScript?

The document’s current title can be obtained or changed using the document.title attribute. When present, the value of the 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 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 +'
'); 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.

Источник