3.1 KiB
3.1 KiB
| title |
|---|
| Location Object |
Location Object
The "Location" object provides an API (Application Programming Interface) which enables retrieval of a URL, setting of a URL, or access to parts of a URL. It is already implemented for you by default on the Window and Document objects. Note: There is no public standard that applies to the location object, but all major browsers support it.
Location Object Properties
| Property | Description |
|---|---|
| hash | Sets or returns the anchor part (#) of a URL |
| host | Sets or returns the hostname and port number of a URL |
| hostname | Sets or returns the hostname of a URL |
| href | Sets or returns the entire URL |
| origin | Returns the protocol, hostname and port number of a URL |
| pathname | Sets or returns the path name of a URL |
| port | Sets or returns the port number of a URL |
| protocol | Sets or returns the protocol of a URL |
| search | Sets or returns the querystring part of a URL |
Location Object Methods
| Method | Description |
|---|---|
| assign() | Loads a new document |
| reload() | Reloads the current document |
| replace() | Replaces the current document with a new one |
Examples
The location objects are accessible by:
console.log(window.location);
// > https://guide.freecodecamp.org/javascript/location-object
console.log(document.location);
// > https://guide.freecodecamp.org/javascript/location-object
You can also set the Location object of an HTML <a> element or an HTML <area> element programmatically with JavaScript.
var anchor = document.createElement('a');
anchor.url = "https://guide.freecodecamp.org/javascript/location-object";
Once you have an object with a URL set (including the window), the Location API allows you to access parts of the URL.
console.log(anchor.protocol);
// > https:
console.log(anchor.host);
// > guide.freecodecamp.org (includes port number if applicable. Example: guide.freecodecamp.org:8080)
Other properties of "Location" you can access are:
anchor.hostname- guide.freecodecamp.organchor.port- 8080anchor.pathname- /javascript/location-objectanchor.origin- https://developer.mozilla.org
If your URL contains parameters or hashes you can access them like so:
// If your URL is https://guide.freecodecamp.org/javascript?param=location#other-properties
console.log(window.location.search);
// > "?param=location"
console.log(document.location.hash);
// > "#other-properties"