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

Javascript Web Development Front End Technology

In this article we will learn how to get the title and full URL of a document in JavaScript with the help of examples.

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.

document.title

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.

<!DOCTYPE HTML>
<html>
<head>
   <title>How to know the Title and URL of document in JavaScript</title>
</head>
   <body style = "text-align:center;">
      <h3>A sample program to know title of a document</h3>
      <p id="text1"></p>
      <script type="text/javascript">
         document.getElementById("text1").innerHTML = "The Document's Title is : "+document.title;
      </script>
   </body>
</html>

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.

<!DOCTYPE HTML>
<html>
<head>
   <title>How to know the Title and URL of document in JavaScript</title>
</head>
<body style = "text-align:center;">
   <h3>A sample program to know title of a document</h3>
   <p id="text1"></p>
   <script type="text/javascript">
      document.title = " New Title : A program to know the title of a document";
      document.getElementById("text1").innerHTML = "The Document's New Title is : "+document.title;
   </script>
</body>
</html>

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.

<!DOCTYPE HTML>
<html>
<head>
   <title>How to know the Title and URL of document in JavaScript</title>
</head>
<body style = "text-align:center;">
   <h3>A sample program to know the FULL URL of a document</h3>
    <p id="text1"></p>
   <script type="text/javascript">
      var url = location.href;
      var docURL = document.URL;
      document.getElementById("text1").innerHTML = "The Location of the Document is : "+docURL+"<br />"+"The document location by using Window object property : "+url;
   </script>
</body>
</html>

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