JavaScript Document location Property

What You’ll Learn

Document.location is a read-only instance property that returns a Location object describing the document’s URL. Learn MDN’s basics, how it relates to window.location and document.URL, URL parts like href and pathname, and five examples with try-it labs.

Introduction

Every web page has an address in the browser’s address bar. JavaScript exposes that address through the Location interface. On a normal page, document.location is your Document-side handle to that URL.

MDN: the read-only property returns a Location object, which contains information about the URL of the document and provides methods for changing that URL and loading another URL.

Related Document tutorials: documentURI, domain, links, Document constructor.

Understanding Document.location

A read-only instance property on Document. Its value is a Location object tied to the document’s browsing context.

• Value — a Location object (MDN); null if the document is not in a browsing context.
• Read URL parts — href, protocol, host, pathname, search, hash, origin.
• Navigate — location.assign(url), location.replace(url), or assign location.href.
• Direct assignment — document.location = url is equivalent to setting href (MDN).
• Window twin — document.location === window.location on a typical page.

📝 Syntax

document.location

Value

A Location object — or null when the document has no browsing context (MDN).

MDN example

console.log(document.location);
// Prints a Location object to the console

Read URL segments (Location interface)

const loc = document.location;
console.log(loc.href);      // full URL
console.log(loc.pathname);  // path after host
console.log(loc.search);    // ?query=string
console.log(loc.hash);      // #fragment

⚖️ URL APIs on Document & Window

Examples Gallery

Examples follow MDN Document: location and the Location interface. Try-it labs read URL data safely without leaving the tutorial page.

console.log(document.location);
// Location { ... } in DevTools
console.log(typeof document.location); // "object"

Location { ... }
"object"

const loc = document.location;
console.log(loc.href);
console.log(loc.protocol);
console.log(loc.hostname);
console.log(loc.pathname);
console.log(loc.search);
console.log(loc.hash);

https://example.com/docs?page=1#intro
https:
example.com
/docs
?page=1
#intro

console.log(document.location === window.location);
// true on a typical web page

true

console.log(document.location.href);
console.log(document.URL);
console.log(document.location.href === document.URL);
// Usually true on the same page

https://example.com/page
https://example.com/page
true

console.log("Before:", document.location.hash);
document.location.hash = "#section-b";
console.log("After:", document.location.hash);
// Address bar shows #section-b; page does not reload

Before: 
After: #section-b

🚀 Common Use Cases

• Read current URL — log or copy document.location.href.
• Route detection — branch on pathname or search params.
• In-page anchors — set location.hash for section jumps.
• Redirect users — location.assign() after login or form submit.
• Replace history entry — location.replace() when back button should skip a step.
• Analytics — send origin + pathname to tracking scripts.

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• You cannot replace the Location object; you only read the property or mutate Location fields.
• document.location = url navigates the same way as location.href = url (MDN).
• Outside a browsing context, document.location may be null (MDN).
• Related: documentURI, domain, links, Document constructor.

💡 Best Practices