How to know the Title and URL of document in JavaScript

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.

Источник

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.

Источник

How to get the title and full URL of a document in JavaScript?

The Javascript HTML DOM has provided some basic methods to access and manipulate the HTML data. To find the title and URL of a document, JavaScript has provided document.title and document.URL respectively.

The document.title property − The document.title property returns the current title of the document. This property applies to HTML, SVG, XUL, and other documents. The syntax to get the title of the document is shown below.

The document.url property − The URL read-only property of the Document interface returns the full URL of the document. i.e., location of the document as a string, including the protocol (http://). It is similar to the Window Object property location.href which returns the URL of the current page. The syntax to get the full URL of the document is shown below.

document.URL or document.documentURI

Let us see some examples for these −

Example 1

Using the document.title property

The following is an example program on how to get the title of the document.

     
A sample program to know title of a document
    

On executing the above code, the following output is generated.

Example 2

When we assign a text to document.title, the title of the document gets changed. This function is demonstrated in the following example.

     
A sample program to know title of a document
    

On executing the above code, the following output is generated.

Example 3

Using document.url property

The following is an example program on how to get the full URL of the document.

     
A sample program to know the FULL URL of a document
    

On executing the above code, the following output is generated.

Источник

How to Change the Page Title in JavaScript

The “Page title” refers to the brief summary of a web page displayed at the top of a browser tab. The document’s title is specified using the tag. The page’s tab or the browser’s title bar displays the title, which should be text only. While navigating website pages, the page’s title should be changed according to its content.

This blog post will define the procedure for changing the page title in JavaScript.

How to Change the Page Title in JavaScript?

For changing the page title, use the below-given methods:

Let’s see how these methods work.

Method 1: Change the Page Title Using document.title Property

The document’s title can be changed or retrieved using the “document. title” attribute. The page’s title can be changed by providing the new name or title as a string to this attribute.

Syntax
Follow the given syntax for using the property “document.title” to change the page title:

Example
Create a button in HTML file that will change the page title on the click event:

Here, the page title of the created HTML page is “Document” that will be changed by clicking on the button:

In JavaScript file, define a function, “changeTitle()” where set the new title for the page that will be changed using the “document.title” attribute:

The above output shows that the page title is successfully changed on the button click.

Method 2: Change the Page Title Using querySelector() Method

There is another way to change the page title, using the “querySelector()” method with the “textContent” attribute. This method takes a DOM element as an argument and then changes the page’s current title using the textContent property.

Syntax
Use the following syntax to change the page title using the “querySelector()” method:

Example
Define a function “changeTitle()” and set the new title for the page by choosing “title” element in “querySelector()” method:

It can be observed from the output that the page’s title has been changed using JavaScript.

Conclusion

To change the page title, use the “document.title” property or the “querySelector()” method with the “textContent” property. For changing the page title, the “document.title” attribute is the most widely utilized method. It quickly changes the page’s title, while the second method first fetches the title element and then changes its value This blog post demonstrates the ways to change the title of the page in JavaScript.

About the author

Farah Batool

I completed my master’s degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.

Источник