LAST UPDATED: MAY 9, 2020
JavaScript Location Object
JavaScript Location is a built-in Interface (object type) which represents the location (URL) of the object to which it is attached. Both the Window object and the Document object have this property. The window objects location property gives us access to the browser window's location whereas the document location property gives us the location object for a particular document.
It is used to fetch information of the current URL. The Location object allows you to navigate to another webpage as well.
Suppose we want to get the current website's hostname then we can use the hostname property of the location object. See the below example:
There are many different properties of the location object and many methods too.
JavaScript Location Object Properties
JavaScript Location Object has many properties using which we can access the various components of a webpage's URL and even change it.
Here are some commonly used properties for the location object:
| Property |
Description |
| href |
Represents a string specifying the entire URL, for instance http://www.javascriptstudytonight.com:80/order.cgi?batch=1#intro |
| protocol |
Represents a String at the begining of a URL to the first colon(:),which specifies the Method of access to the URL , for instance http: or https: |
| host |
Represents a String consisting of hostname and port Strings,for instance:- www.javascriptstudytonight.com:80 |
| hostname |
Represents the server name, subdomain, and domain name (or IP address)of a URL, for instance www.javascriptstudytonight.com |
| port |
Represents a string specifying the communication port that the server uses, for instance 80 |
| pathname |
Represents a String Portion of a URL, specifying how a particular resource can be accessed, for instance: order.cgi |
| search |
Represents a string beginning with a question mark that specifies any query information in an HTTP URL, for instance batch=1 |
| hash |
Represents a string beginning with a hash(#), which specifies an anchor name in an HTTP URL, for instance #intro |
Let's take an example and get to know about the properties of Location object.
Now let's see the methods of the location object.
JavaScript Location Object Methods
Location Object methods refers to the functions created inside the location interface which can be used to perform various operations on the URL like reload it, change it, etc.
| Method |
Description |
assign() |
Loads a new Document in the Browser |
reload() |
Reloads the current document that is contained in location.href property. |
replace() |
Replaces the current document with the specified new one. In addition, you cannot navigate back to the previous document using the Browser's back button. |
To load a new document, We can use the assign() method of Location object. But in this example, we have used the href property and the replace() methods too. They all can be used to load a document. See the below example:
