Document.URL is a read-only instance property that returns the document location as a string—the address of the current page. Learn how it compares to document.documentURI and location.href, how to display it in the UI, parse URL parts, and five examples with try-it labs.
Read-only
URL string
documentURI
location.href
Use location
Baseline widely
The browser address bar shows where you are on the web. JavaScript can read that same address from the active document through document.URL.
MDN: the URL read-only property of the Document interface returns the document location as a string. MDN also notes that document.documentURI returns the same value.
document.URL tells you where the document lives. To go somewhere else, use location.href, location.assign(), or History APIs—not an assignment to document.URL.
Related Document tutorials: documentURI, referrer, title, Document constructor.
Document.URLA read-only instance property on Document. Its value is a string naming the document’s full location.
document.documentURI — MDN documents matching values.document.URLA string containing the URL of the document (MDN).
document.getElementById("url").textContent = document.URL;| Goal | Code / note |
|---|---|
| Read document address | document.URL |
| Same value | document.documentURI |
| Show in the page | el.textContent = document.URL |
| Compare with location | document.URL === location.href |
| Change address | location.href = "…" (not document.URL) |
| MDN status | Baseline Widely available |
Four facts about document.URL.
stringLocation
read-onlyNo setter
documentURISame value
baselineSince 2015
| Part | Example | In document.URL? |
|---|---|---|
| Origin + path | https://example.com/page | Yes |
| Query string | ?q=1 | Yes (when present) |
| Hash / fragment | #section | Yes (when present) |
| Path only | location.pathname | Use Location for pieces |
Examples follow MDN Document: URL. Use View Output or Try It Yourself for each case.
Read the location string and display it (MDN).
document.URLPrint the current document address (MDN).
console.log(document.URL);
// e.g. "https://www.codetofun.com/js/document/properties/url"The browser reports the address associated with this Document object.
MDN’s pattern: write document.URL into a text node.
<p id="urlText">
URL:<br />
<span id="url">URL goes here</span>
</p>document.getElementById("url").textContent = document.URL;Useful for debug panels, share links, or “you are here” indicators in admin UIs.
Compare related APIs and break the string into parts.
document.documentURI (MDN)Confirm both Document properties match.
console.log(document.URL);
console.log(document.documentURI);
console.log(document.URL === document.documentURI); // trueMDN: document.documentURI returns the same value as document.URL.
location.hrefLocation is the usual API when you also need to navigate.
console.log("document.URL:", document.URL);
console.log("location.href:", location.href);
console.log("Equal:", document.URL === location.href);On the active page they usually match. Prefer location when assigning a new address or reading pathname/search/hash.
URL ConstructorTurn the string into structured parts without manual string splitting.
const u = new URL(document.URL);
console.log("origin:", u.origin);
console.log("pathname:", u.pathname);
console.log("search:", u.search);
console.log("hash:", u.hash);Or read location.pathname, search, and hash directly when you already have the Location object.
document.URL.Document, read its URL without assuming global location.location.href or use History instead.document.URL WorksUser opens a URL or a script navigates.
The Document object knows its location string (MDN).
document.URLSame value as document.documentURI; often matches location.href.
location.href, assign, replace, or History APIs—not document.URL.
document.URL and document.documentURI return the same value (MDN).location to navigate.contentDocument.URL reflects that frame’s address (when accessible).Document.URL is marked Baseline Widely available on MDN (since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only string — full document location (same value as documentURI).
Bottom line: Use document.URL to read the page address from a Document. Pair with location or the URL constructor when you need navigation or parsed parts.
Document.URL is a read-only string that tells you where the current document lives. It matches document.documentURI and usually equals location.href on the active page. Use it to display, log, or parse the address—but use location when you need to navigate.
Continue with visibilityState, ownerDocument, documentURI, referrer, or the JavaScript hub.
document.URL to read the page address from Documentdocument.documentURI when reviewing legacy codenew URL(document.URL) for structured partslocation when you need to navigate or assign hrefdocument.URL (read-only)document.documentURI (MDN: same value)document.URL with document.baseURIdocument.URLRead-only document location string.
String
Read-onlyLocation
MDNdocumentURI
Samelocation
Not URLBaseline
2015+MDN lists both document.URL and document.documentURI as ways to get the document location, and explicitly states they return the same value. Many codebases use document.URL because the name matches everyday speech—“what’s the page URL?”
Learn the Page Visibility API string — visible or hidden tab state.
6 people found this page helpful