A Complete Guide to the document.location Property and Location Object in JavaScript
Tags: javascript, webdev, tutorial, beginners
Published: 2020-01-23 03:58:14

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

The `window` object is a global object that has the properties pertaining to the current DOM document, which are the things that are in the tab of a browser.

In this article, we will look at the properties of the `window.document` object, including the properties of the `window.document.location` object.

window.document.location
========================

The `document.location` is a read-only property returns a `Location` object, which is information about the URL of the current document and gives us methods for changing and loading URLs.

Even though it’s a read-only `Location` object, if we assign a string to it, it will load the URL in the string.

For example, if we want to load `'https://medium.com'` , we can assign it straight to the `document.location` property as in the following code:

```javascript
document.location = 'https://medium.com';
```

This is the same as assigning the same URL to the `document.location.href` property:

```javascript
document.location.href = 'https://medium.com';
```

Both pieces of code will load [https://medium.com](https://medium.com'). The `Location` object has the following properties:

*   `Location.href`
*   `Location.protocol`
*   `Location.host`
*   `Location.hostname`
*   `Location.port`
*   `Location.pathname`
*   `Location.search`
*   `Location.hash`
*   `Location.username`
*   `Location.password`
*   `Location.origin`

`Location.href`
---------------

The `location.href` property is a string that has the whole URL. We can both use it to get the URL of the current page and set the URL so that we can go to the next page. For example, if we have:

```javascript
console.log(location.href);
```

Then we get the full URL, which is something like:

```
https://fiddle.jshell.net/_display/
```

We can also use it to go to a different page. For example, we can write:

```javascript
document.location.href = 'https://medium.com';
```

To go to the Medium website. It does the same thing as:

```javascript
document.location = 'https://medium.com';
```

If the current document isn’t in a browsing context, then the value of this property is `null`.

`Location.protocol`
-------------------

We can use the `protocol` property to get the protocol portion of the URL, which is the very first part of the URL before the first colon (`:`). For example, we can use it like in the following code:

```javascript
console.log(document.location.protocol);
```

Then we get `https:` for an HTTPS web page and `http:` for HTTP pages. We can also set the protocol like in the following code:

```javascript
document.location.protocol = 'http';
```

If the code above is run, the browser will attempt to go to the HTTP version of the current page.

Location.host
-------------

The `host` property has the string of the hostname. If there’s a port with the hostname, that will also be included. For example, we can retrieve hostname like in the following:

```javascript
console.log(document.location.host);
```

Then we get something like `fiddle.jshell.net` from the `console.log` statement. We can also set the `host` property. If we write something like the following code:

```javascript
document.location.host = 'medium.com';
```

Then the browser will switch the hostname for the current page with the new one and attempt to load the URL with the new hostname.

Location.hostname
-----------------

The `hostname` property is a string property that contains the domain of the URL. For example, we can get the domain by running:

```javascript
console.log(document.location.hostname);
```

Then we get something like `fiddle.jshell.net` from the `console.log` statement. We can also set the `host` property. If we write something like the following code:

```javascript
document.location.hostname = 'medium.com';
```

Then the browser will switch the domain for the current page with the new one and attempt to load the URL with the new hostname.

Location.port
-------------

The `port` property lets us get and set the port of the URL. It is a string property. If the URL doesn’t have a port number then it’ll be set to an empty string. For example, if we have:

```javascript
console.log(document.location.port);
```

Then we get something like `“3000”` if the port is 3000. We can also set the `host` property. If we write something like the following code:

```javascript
document.location.port = '3001';
```

Then the browser will switch the port for the current page with the new one and attempt to load the URL with the new port number.

Location.pathname
-----------------

The `pathname` property is a string property that has the slash followed by the path of the URL, which is everything after the domain. The value will be an empty string if there’s no path. For example, if we have:

```javascript
console.log(document.location.pathname);
```

Then we get something like `“/_display/”`. We can also set the `pathname` property. If we write something like the following code:

```javascript
document.location.pathname = '3001';
```

Then the browser will switch the path for the current page with the new one and attempt to load the URL with the new path.

Location.search
---------------

The `search` property is a string property that gets us the query string. The query string is the part of the URL after the `?`. For example, we can get the query string part of the URL of the currently loaded page by running:

```javascript
console.log(document.location.search);
```

Then we get something like:

```
"?key=value"
```

If we have a URL like [http://localhost:3000/?key=value](http://localhost:3000/?key=value). To parse and manipulate the query string we can convert it to a `URLSearchParams` object. If we want to go to a URL with a different query string, we can assign a new query string to the `document.location.search` property like we do in the following code:

```javascript
document.location.search = '?newKey=newValue';
```

Then the new URL for our browser tab will be http://localhost:3000/?newKey=newValue.

Location.hash
-------------

The `hash` property lets us get and set the part of the URL after the pound sign (`#`). The hash isn’t percent decoded. If there’s no hash fragment, then the value will be an empty string. For example, we can get the query string part of the URL of the currently loaded page by running:

```javascript
console.log(document.location.hash);
```

Then we get something like:

```
"#hash"
```

if we have a URL like http://localhost:3000/?key=value. If we want to go to a URL with a different query string, we can assign a new query string to the `document.location.hash` property like we do in the following code:

```javascript
document.location.hash= '#newHash';
```

Then the new URL for our browser tab will be http://localhost:3000/?newKey=newValue.

Location.username
-----------------

The `username` property gets us the username portion of the URL returned as a string, which is the part between the protocol and the colon. For example, if we went to  http://username:password@localhost:3000/, then `document.location.username` will get us `'username'`. If we assign to it like wit the following code:

```javascript
document.location.username = 'newUsername'
```

Then the new page will be http://newUsername:password@localhost:3000/..

Location.password
-----------------

The `password` property gets us the username portion of the URL returned as a string, which is the part between the protocol and the colon. For example, if we went to http://username:password@localhost:3000/, then `document.location.password`will get us `'password'`. If we assign to it like wit the following code:

```javascript
document.location.password= 'newPassword'
```

Then the new page will be http://username:newPassword@localhost:3000/.

Location.origin
---------------

The `origin` property is a string read-only property that has the origin of the represented URL.

For URLs that are with `http` or `https` , then it’ll include the protocol followed by `://` , followed by the domain, followed by a colon, then followed by the port if it’s explicitly specified.

For a URL that has the `file:` scheme, then the value is browser dependent. For `blob` URLs, then the origin of the URL will be the part following `blob:` . For example, we can log the `origin` property like in the following code:

```javascript
console.log(document.location.origin);
```

to get something like:

```
https://fiddle.jshell.net
```

The `window.document.location` object is an object that has the URL of the current page.

The `location` object let us various parts of the URL of the current page, and also set them so that the browser will switch out the part that’s designated by the property name and then go to the page with the new URL.

There are also methods to do various things to the currently loaded page, so stay tuned for the next part of this series.