window.location object properties

Browser Object Model more commonly referred to as BOM is an object model that is used by JavaScript to communicate with the browser. BOM contains objects that uncover the functionalities of a web browser. There are many significant objects that form part of the Browser Object Model (BOM), such as history object, screen object, location object, navigation object, etc. These objects consist of a lot of properties and methods. This write-up, however, is designed to highlight the properties of the Location Object.

Before jumping right to the properties of the Location Object, let’s first understand what a location object is.

Location Object

The location object consists of the relevant information about the available URL and like document object, history object, and screen object, it is also a property of the window object.

Syntax
The syntax of the location object is as follows.

window.location

Or,

location

Example
In the following example, we are using the pathname property of the location object to fetch the pathname of the web page.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let path = location.pathname;
document.getElementById("tutorial").innerHTML = path;
</script>

</body>
</html>

Output

Using the pathname property of the location object we have fetched the pathname of the existing URL.

Now that we have a basic understanding of the location object, let’s dive into the details of the properties of the location object.

Properties of the Location Object

Location object properties are as follows.

1. hash

It is used for the purpose of fetching or setting the anchor of the URL (including the hash#).

Syntax
The syntax of the hash property is given below.

For fetching,

location.hash

For setting,

location.hash = anchor-name

Example
Suppose you want to get the anchor part of a url using the hash property of the location object.

<!DOCTYPE html>
<html>
<body>

<p><a id="linux" href="https://linuxhint.com/linux-command-cheat-sheet/#linux-command-cheat-sheet">Linux Command Cheat Sheet</a><p>

<p id="tutorial"></p>

<script>
let url = document.getElementById("linux");
document.getElementById("tutorial").innerHTML = "The anchor portion of the URL is: " + url.hash;
</script>

</body>
</html>

In the above example, we provided a link to the href attribute of the <a> element then we used the hash property over the link to get the anchor portion of the URL.

document.getElementById("tutorial").innerHTML = "The anchor portion of the URL is: "

Output

Using the hash property of the location object we extracted the anchor portion of the URL.

2. host

It is used for the purpose of extracting the hostname and port number of the URL.

Syntax
The host property syntax is given below.

For fetching the host of the URL,

location.host

For setting the host of the URL,

location.host = new host:new port

Example
Suppose you want to fetch the hostname of the existing URL using the host property of the location object.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let host = location.host;
document.getElementById("tutorial").innerHTML = host;
</script>

</body>
</html>

In the above example, we are getting the hostname of the available URL using the following piece of code.

let host = location.host;
document.getElementById("tutorial").innerHTML = host;

Output

Using the host property of the location object the hostname and port number of the existing URL has been fetched.

3. hostname

It is used for fetching the hostname of the URL.

Syntax
The hostname property syntax is provided below.

For fetching the hostname of the URL,

location.hostname

For setting the hostname of the URL,

location.hostname = new host name

Example
Suppose, you want to extract the hostname of the at hand URL.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let hostname = location.hostname;
document.getElementById("tutorial").innerHTML = hostname;
</script>

</body>
</html>

In the above example, the hostname property of the location object was used to get the hostname of the available URL.

let hostname = location.hostname;
document.getElementById("tutorial").innerHTML = hostname;

Output

Using the hostname property of the location object the hostname of the present URL has been fetched.

4. href

It is used for the purpose of fetching or setting the complete URL.

Syntax
The href property syntax is given below.

For extracting the href of the URL,

location.href

For setting the href of the URL,

location.href = new URL

Example
Suppose you want to extract the complete URL of existing web page.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let url = location.href;
document.getElementById("tutorial").innerHTML = url;
</script>

</body>
</html>

In the above example, using the href property of the location object, the complete URL of the at hand web page is being fetched.

let url = location.href;
document.getElementById("tutorial").innerHTML = url;

Output

The complete URL of the present web page has been extracted using the href property of the location object.

5. origin

It is used for the purpose of fetching the hostname, port number, and protocol of the URL.

Syntax
The syntax of the origin property is as follows.

location.origin

Example
Suppose you want to fetch the protocol, hostname and port number of the present URL.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let origin = location.origin;
document.getElementById("tutorial").innerHTML = origin;
</script>

</body>
</html>

In the above example, the origin (protocol, hostname, and port number) of the present URL is being fetch using origin property of the location object.

let origin = location.origin;
document.getElementById("tutorial").innerHTML = origin;

Output

The output displays the protocol, hostname, and port number of the available URL.

6. pathname

It is used for the purpose of extracting or setting the pathname of the URL.

Syntax
The pathname property syntax is as follows.

For fetching the pathname of the URL,

location.pathname

For setting the pathname of the URL,

location.pathname = new pathname

Example
Suppose you want to extract the pathname of the present URL.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let path = location.pathname;
document.getElementById("tutorial").innerHTML = path;
</script>

</body>
</html>

In the above example, the pathname of the existing URL is being extracted using the pathname property of the location object.

let path = location.pathname;
document.getElementById("tutorial").innerHTML = path;

Output

Using the pathname property of the location object, the pathname of the existing URL has been fetched.

7. port

It is used for the purpose of extracting or setting the port number of the URL.

Syntax
The port property syntax is as follows.

For fetching the port of the URL,

location.port

For setting the port of the URL,

location.port = new port number

Example
In the following example, the port number of the present web page is being extracted.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let port = location.port;
document.getElementById("tutorial").innerHTML = "The port number of the current web page is: " + port;
</script>

</body>
</html>

In the above example, using the port property of the location object, the port number of the present web page is being extracted.

let port = location.port;
document.getElementById("tutorial").innerHTML = "The port number of the current web page is: " + port;

Output

The port number of the present web page has been fetched and shown in the output.

8. protocol

It is used for the purpose of fetching or setting the protocol of the URL.

Syntax
The protocol property syntax is as follows.

For extracting the port of the URL,

location.protocol

For setting the port of the URL,

location.protocol = new protocol

Example
In the following example, the protocol of the available URL is being fetched.

<!DOCTYPE html>
<html>
<body>

<p id="tutorial"></p>

<script>
let protocol = location.protocol;
document.getElementById("tutorial").innerHTML = protocol;
</script>

</body>
</html>

The following piece of code fetches the protocol of the present URL.

let protocol = location.protocol;
document.getElementById("tutorial").innerHTML = protocol;

Output

The protocol of the present URL has been extracted.

9. search

It is used for the purpose of fetching or setting the querstring of the URL.

Syntax
The search property syntax is as follows.

For extracting the search of the URL,

location.search

For setting the search of the URL,

location.search = querystring

Example

<!DOCTYPE html>
<html>
<body>

<p><a id="linux" href="https://linuxhint.com/linux-command-cheat-sheet/?answer=yes">
https://linuxhint.com/linux-command-cheat-sheet/?answer=yes</a></p>

<p id="tutorial"></p>

<script>
let anchor = document.getElementById("linux");
let query = anchor.search;
document.getElementById("tutorial").innerHTML = "The search portion of the URL is: " + query;
</script>

</body>
</html>

The following piece of code fetches the querystring of the URL.

let anchor = document.getElementById("linux");
let query = anchor.search;
document.getElementById("tutorial").innerHTML = "The search portion of the URL is: " + query;

Output

The query string of the URL has been extracted.

Conclusion

The location object consists of the relevant information about the available URL and like document object, it is also a property of the window object. It consists of many properties such as hash, host, hostname, pathname, etc. These properties have different purposes that are highlighted in this post along with suitable examples.

window.location object properties | Explained

Location Object

Properties of the Location Object

1. hash

2. host

3. hostname

4. href

5. origin

6. pathname

7. port

8. protocol

9. search

Conclusion

About the author

Naima Aftab