JavaScript Document location Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word LOCATION

Definition

Document.location is a read-only property that returns a Location object for the document’s URL, with parts like href, pathname, and hash, plus methods to navigate (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.location. Start with this line.

JavaScript
document.location
CallWhat it does
document.locationPrimary signature.

Built into the browser. Read or assign document.location — no import required.

Library declarations
JavaScript
document.location

Parameters

ParameterDescription
locationRequired. Location object (read-only accessor)
Navigation methodsOptional. assign, replace, reload

Return Value

Return ValueDescription
*The current value of document.location.

JavaScript Examples

Example 1 — Read location.href

Log the Location object and its full URL string (MDN pattern).

JavaScript
console.log(document.location);
console.log(document.location.href);
Try It Yourself

How It Works

  1. Read the property. Returns a Location object for this document.
  2. Log the object. DevTools expands href, pathname, and more.
  3. Read href. The full URL as a string.
  4. No navigation. Reading never changes the page.

Example 2 — Pathname, Search, and Hash

Break the current URL into common Location parts.

JavaScript
const loc = document.location;

console.log(loc.pathname);
console.log(loc.search);
console.log(loc.hash);
Try It Yourself

How It Works

  1. Store the Location. One reference for several reads.
  2. Pathname. Path after the host, starting with /.
  3. Search. Query string including ?, or empty.
  4. Hash. Fragment including #, or empty.

Example 3 — location.href vs document.URL

Compare the Location stringifier with the read-only URL string property.

JavaScript
console.log(document.location.href);
console.log(document.URL);
console.log(document.location.href === document.URL);
Try It Yourself

How It Works

  1. Read href. Full URL via the Location object.
  2. Read document.URL. Same idea as a plain string (MDN).
  3. Compare. On a normal page they match.
  4. When to choose which. Need parts or navigation → location; string only → URL.
Compatibility

Browser Support

Document.location is Baseline Widely available on MDN (since July 2015). It works across modern browsers as a standard Document property.

✓ Baseline · Widely available

Document.location

Read-only Location object for the document URL — inspect parts or navigate with href / assign / replace.

99% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
location Excellent

Bottom line: Safe everywhere you teach DOM APIs. Use document.URL for a string-only read. Treat assign/replace as real navigation, not logging helpers.

Frequently Asked Questions

A Location object with information about the document URL and methods to change it (such as assign and replace). If the document is not in a browsing context, MDN says the value is null.
No. MDN marks Document.location as Baseline Widely available (since July 2015). It is a standard Document instance property.
On a normal page they refer to the same Location object for that browsing context. Document.location is on the Document; Window.location is on the Window.
Yes. Although you cannot replace the Location object itself, assigning a URL string to document.location is equivalent to assigning to location.href and navigates the page (MDN).
Use document.URL when you only need the current page URL as a read-only string. Use document.location when you also need URL parts (pathname, search, hash) or navigation methods.
Both load a new URL. location.replace() does not keep the current page in session history, so the Back button will not return to it. location.assign() (or setting href) does keep history.

Next: pictureInPictureElement

Learn which element is currently showing Picture-in-Picture video.

pictureInPictureElement tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

JavaScript Document links Property JavaScript Document pictureInPictureElement Property