HTML DOM Location Object

Last Updated : 14 Nov, 2021

The Location Object in HTML DOM is used to provide information about the current URL of a webpage. This object is a sub part of a window object. As it get the information by using window.location property. The location Object is used to retrieve the information regarding the hash value , host _name , port number and name of the protocol and so on.

Below are the predefined properties and methods that are given below.

Properties:

hash: It is used to set or return the anchor part (#) of a URL .
host: It is used to set or return the host name and port number of a current webpage URL.
hostname: It is used to set or return the host name or the name of the website, such as “www.geeksforgeeks.org“.
href: It is used to set or return the value of the whole current url of the webpage.
origin: It is used to return the protocol, hostname and port number of a current URL.
pathname: It is used to set or return the value of the path name of a webpage.
port: It is used to set or return the port number of a current URL.
protocol: It is used to set or return the name of the protocol of a current URL.
search: It is used to set or return the value of the query string part of a URL.

Methods:

assign() : It can be used for loading a new document but the difference between these two methods is that the replace() method removes the URL of the current document from the document history and therefore it is not possible to navigate back to the original document using the “back” button.
reload(): It is used to reload a current document.
replace(): It is used to replace a current document with a new document.

Note : All major browsers supports all properties and methods of location object.

Below example illustrates how to access the properties and method of location objects.

Example 1: Below code returns the protocol, port number and the host name of the URL.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Location origin property</b> 
  
    <button onclick="getOrigin();"> 
        Get Location Origin 
    </button> 
  
    <p>The location origin of this page is:</p> 
  
    <div class="location"></div> 
  
    <script> 
        function getOrigin() { 
            let loc = location.origin; 
            document.querySelector( 
                '.location').innerHTML = loc; 
        } 
    </script> 
</body> 
</html> 

Output:

Example 2: Below code illustrates the use of assign() method in location object.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Location assign() Method in HTML</title> 
  
    <style> 
        h1 { 
            color:green; 
        } 
          
        h2 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h2>Location assign() Method</h2> 
  
    <p> 
        For loading a new document, double  
        click the "Load Document" button: 
    </p> 
  
    <button ondblclick="load()"> 
        Load Document 
    </button> 
  
    <script> 
        function load() { 
            location.assign("https://www.geeksforgeeks.org"); 
        } 
    </script> 
</body> 
</html> 
                     