New Tutorials:   JAVASCRIPT    SASS/SCSS    PL/SQL  
See the Tutorial List

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: