javascriptroom blog

Understanding the HTML DOM Location href Property

The HTML DOM (Document Object Model) provides a way to interact with and manipulate HTML documents programmatically. One of the important properties within the Location object is the href property. It plays a crucial role in handling the URL of the current page or navigating to a new page. In this blog post, we'll explore what the Location.href property is, how it works, and how you can use it effectively in your web development projects.

2026-06

Table of Contents#

  1. What is the HTML DOM Location Object?
  2. The href Property Explained
  3. Reading the href Property
  4. Writing to the href Property (Navigation)
  5. Common Practices and Best Practices
  6. Example Usage
  7. References

What is the HTML DOM Location Object?#

The Location object in the HTML DOM represents the current URL of the document. It contains various properties that provide information about different parts of the URL (such as protocol, host, pathname, etc.). The Location object is accessible via the window.location property in JavaScript.

The href Property Explained#

The href property of the Location object is a string that represents the entire URL of the current page. It includes the protocol (e.g., http:// or https://), the domain name (or IP address), the port number (if applicable), the pathname, the query string, and the fragment identifier. For example, if the current page's URL is https://www.example.com/blog/post?category=webdev#section1, then window.location.href will return that exact string.

Reading the href Property#

You can easily read the value of the href property using JavaScript. Here's a simple example:

const currentUrl = window.location.href;
console.log(currentUrl);

This code snippet will log the full URL of the current page to the browser's console. You can use this value for various purposes, such as analytics (to track which page a user was on before a certain action), or for custom URL parsing (if you want to extract specific parts of the URL).

Writing to the href Property (Navigation)#

One of the most common uses of the href property is for navigation. When you assign a new value to window.location.href, the browser will load the new page specified by that URL. For example:

// Navigate to a new page
window.location.href = "https://www.example.com/new-page.html";

This will cause the browser to immediately start loading the new-page.html page from the example.com domain. You can also use relative URLs. For instance, if your current page is in a pages directory and there's a contact.html file in the same directory, you can do:

window.location.href = "contact.html";

Using location.assign() vs. location.href#

There's also the location.assign() method which has a similar effect. The difference is mainly in how they are implemented under the hood. location.href is a more straightforward and commonly used approach for simple navigation. But if you want to be more explicit about the navigation action (and in some cases, it might have a performance advantage in very complex scenarios), you can use location.assign(). For example:

location.assign("https://www.example.com/another-page.html");

Common Practices and Best Practices#

  • Validation: Before assigning a new value to location.href, it's a good practice to validate the URL. You can use regular expressions or built-in JavaScript functions (like URL constructor in modern browsers) to check if the URL is in a valid format.
  • User Experience: Be cautious when using navigation via location.href in single-page applications (SPAs). In SPAs, you usually want to use client-side routing libraries (like React Router for React apps) to handle navigation smoothly without full page reloads. But for traditional multi-page websites or simple navigation within a page (e.g., to a specific anchor), location.href can be very useful.
  • Security: Avoid using user-supplied input directly as the value for location.href without proper sanitization. Malicious users could potentially inject harmful URLs (like phishing links) if you're not careful.

Example Usage#

Example 1: Redirecting after a Form Submission#

Suppose you have a form on a page, and after successful submission (using AJAX or a traditional form submit), you want to redirect the user to a thank-you page. Here's how you could do it:

<!DOCTYPE html>
<html>
 
<body>
  <form id="myForm">
    <input type="text" name="username" placeholder="Enter your username">
    <input type="submit" value="Submit">
  </form>
 
  <script>
    const form = document.getElementById("myForm");
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      // Assume some form validation and AJAX submission code here (omitted for simplicity)
      // Then redirect to thank-you page
      window.location.href = "thank-you.html";
    });
  </script>
</body>
 
</html>

Example 2: Tracking Page Visits (Simple Analytics)#

You could use the href property to track which pages a user visits. Let's say you have a simple analytics function:

function trackPageVisit(url) {
  // Here you could send the URL to a server (using AJAX) for logging
  console.log(`User visited: ${url}`);
}
 
const currentUrl = window.location.href;
trackPageVisit(currentUrl);

References#

By understanding and using the Location.href property effectively, you can enhance the functionality and user experience of your web applications. Whether it's for simple navigation or more complex URL-related tasks, this property is a valuable tool in your web development toolkit.