JavaScript Document documentURI Property

What You’ll Learn

Document.documentURI is a read-only instance property that returns the document location as a string. Learn how it relates to document.URL and location.href, when to use each, and five examples with try-it labs.

Introduction

Every loaded page has an address—the URL you see in the browser bar. JavaScript can read that address in a few ways. One of them is document.documentURI.

MDN: the documentURI read-only property returns the document location as a string. MDN also notes that document.URL returns the same value.

Related Document tutorials: documentElement, doctype, Document constructor.

Understanding Document.documentURI

A read-only instance property on Document. Its value is a string naming the document’s location.

• Type — string (full location).
• Read-only — you cannot assign a new URI here (MDN).
• Same as document.URL — MDN documents matching values.
• Navigation — use location / History APIs to change the address.
• Useful for — logging, analytics, displaying the current URL in UI (MDN-style).

📝 Syntax

document.documentURI

Value

A string — the document location (MDN).

MDN-style display

document.getElementById("url").textContent = document.documentURI;

⚖️ documentURI vs URL vs location

Examples Gallery

Examples follow MDN Document: documentURI. Use View Output or Try It Yourself for each case.

console.log(document.documentURI);
// e.g. "https://www.codetofun.com/js/document/properties/document-uri"

https://example.com/page

document.getElementById("url").textContent = document.documentURI;

URL:
https://example.com/page

console.log(document.documentURI);
console.log(document.URL);
console.log(document.documentURI === document.URL); // true

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

console.log("documentURI:", document.documentURI);
console.log("location.href:", location.href);
console.log("Equal:", document.documentURI === location.href);

documentURI: https://example.com/page
location.href: https://example.com/page
Equal: true

const u = new URL(document.documentURI);

console.log("origin:", u.origin);
console.log("pathname:", u.pathname);
console.log("search:", u.search);
console.log("hash:", u.hash);

origin: https://example.com
pathname: /page
search: 
hash: 

🚀 Common Use Cases

• Debug panels — show the live document address (MDN demo style).
• Logging / analytics — record which document URL produced an event.
• Share / copy link — seed a clipboard helper from documentURI.
• Multi-document tools — when you hold a Document, read its URI without assuming global location.
• Not for navigation — assign location.href or use History instead.
• Alias awareness — teams often write document.URL; same value (MDN).

📝 Notes

• MDN: Baseline Widely available (since April 2018) — no Deprecated / Experimental / Non-standard banner.
• Read-only string — the document location.
• document.URL returns the same value (MDN).
• Do not confuse with assigning location.href for navigation.
• Related: documentElement, doctype, Document constructor.

💡 Best Practices