The window object is a global object that has the properties pertaining to the current DOM document, which is the things that are in the tab of a browser. The document property of the window object has the DOM document and associated nodes and methods that we can use to manipulate the DOM nodes and listen to events for each node. Since the window object is global, it’s available in every part of the application. When a variable is declared without the var , let or const keywords, they’re automatically attached to the window object, making them available to every part of your web app. This is only applicable when strict mode is disabled. If it’s enabled, then declaring variables without var , let , or const will be stopped an error since it’s not a good idea to let us declare global variables accidentally. The window object has many properties. They include constructors, value properties and methods. There’re methods to manipulate the current browser tab like opening and closing new popup windows, etc.
In a tabbed browser, each tab has its own window object, so the window object always represent the state of the currently opened tab in which the code is running. However, some properties still apply to all tabs of the browser like the resizeTo method and the innerHeight and innerWidth properties.
Note that we don’t need to reference the window object directly for invoking methods and object properties. For example, if we want to use the window.Image constructor, we can just write new Image() . In this article, we continue to look at what’s in the window object. In the previous sections, we looked at the constructors and some of the properties of the window object, including using the customElements to build a Web Component, and the crypto object to do cryptography on the client using symmetric and asymmetric encryption algorithms. In this part, we will look at 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 URLs and loading a different URL. Even though it’s a read only Location object, we assign a string to it, to load a different URL than the URL of current page. For example, if we want to load 'https://medium.com' , we can assign it straight to the document.location property like we do with the following code:
document.location = '[https://medium.com'](https://medium.com%27);
This is the same as assigning the same URL to the document.location.href property:
document.location.href = '[https://medium.com'](https://medium.com%27);
Both pieces of code will load https://medium.com. The Location object has the following properties, they are the following:
Location.hrefLocation.protocolLocation.hostLocation.hostnameLocation.portLocation.pathnameLocation.searchLocation.hashLocation.usernameLocation.passwordLocation.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:
console.log(location.href);
Then we get the full URL, which is something like:
[https://fiddle.jshell.net/_display/](https://fiddle.jshell.net/_display/)
We can also use it to go to a different page. For example, we can write:
document.location.href = '[https://medium.com'](https://medium.com%27);
to go to the Medium website. It does the same thing as:
document.location = '[https://medium.com'](https://medium.com%27);
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:
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:
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 host name. If there’s a port with the host name, that will also be included. For example, we can retrieve host name like in the following:
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:
document.location.host = 'medium.com';
Then the browser will switch the host name for the current page with the new one and attempt to load the URL with the new host name.
Location.hostname
The hostname property is a string property that contains the domain of the URL. For example, we can get domain by running:
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:
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 host name.
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:
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:
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:
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:
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:
console.log(document.location.search);
Then we get something like:
"?key=value"
if we have a URL like 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:
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 let 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:
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:
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:
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.passwordwill get us 'password' . If we assign to it like wit the following code:
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 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:
console.log(document.location.origin);
to get something like:
[https://fiddle.jshell.net](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 stayed tuned for the next part of this series.
