JavaScript Node baseURI Property

Beginner
5 min read
Updated: Oct 2026
5 examples
Live preview
Baseline
JavaScript Node.baseURI property — absolute document base URL and base href
Definition

What Is baseURI?

Node.baseURI is a read-only string: the absolute base URL of the document that contains the node (MDN). The browser uses it to resolve relative URLs (for example img src or SVG href).

Baseline · Widely available: not Deprecated, Experimental, or Non-standard (since July 2015).

Read-only: you cannot assign to baseURI. Its value is recomputed on each read and may change if the document URL or <base> changes (MDN).

Remember
node.baseURI  →  absolute base URL string (read-only)

Default: document location (window.location)
With <base href>: first base href wins (HTML documents)

Resolve relative paths:
  new URL("images/photo.jpg", node.baseURI).href
UsePrefer
Read document basenode.baseURI or document.baseURI
Current page URLdocument.URL / location
Resolve a relative pathnew URL(rel, node.baseURI).href
Approach

How to Use baseURI

Read it on any node in the document. Change the base with <base href>, not by assigning to the property.

  1. Pick a node in the document (element, text, or document itself).
  2. Read node.baseURI — you get an absolute URL string.
  3. Optional: add <base href="..."> in HTML to override the default base.
  4. Resolve relatives with new URL(relative, node.baseURI).
PieceRequired?Role
Any NodeYesReceiver — must belong to a document
Return value—Absolute base URL string
<base href>OptionalOverrides default document location (first one wins)

Pseudocode

Pseudocode
base = location of the document containing this node

if HTML document AND first <base href> exists:
  base = that href (absolute)

return base   // string; recomputed on each read
Reference

Cheat Sheet

Keep these facts handy when debugging relative URLs.

TopicDetail
Syntaxnode.baseURI
TypeRead-only string
DefaultDocument location (window.location)
<base href>First matching base element overrides (HTML)
Writable?No — assignment is rejected
Resolve relativenew URL(rel, node.baseURI).href
Same document?Usually same value for all nodes
Status (MDN)Baseline Widely available
Try it

Live Preview

Read this page’s baseURI, compare document vs element, or resolve a relative path against the current base.

Browser demo of Node.baseURI — read, compare, resolve, or prove read-only.

Result
Loading…
Code

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Default Base (MDN)

Read an element’s baseURI when no <base> tag is present.

JavaScript
const output = document.createElement("output");
document.body.appendChild(output);

output.value = output.baseURI;
console.log(output.value);
// → absolute URL of this document (location)
Try It Yourself

How It Works

  1. No <base>. Default base is the document location (MDN).
  2. Read output.baseURI. Returns an absolute URL string.
  3. Same for any node here. The algorithm uses the containing document.
  4. Useful for debugging. Confirms what relative links resolve against.

Example 2 — With <base href> (MDN)

The first <base href> overrides the default document location.

JavaScript
// In HTML <head>:
// <base href="https://developer.mozilla.org/modified_base_uri/" />

const output = document.querySelector("output");
console.log(output.baseURI);
// → "https://developer.mozilla.org/modified_base_uri/"
Try It Yourself

How It Works

  1. Add <base href> in head. First one with href wins (MDN).
  2. Read any node’s baseURI. It reflects that base.
  3. Relative assets change. src/href resolve against the new base.
  4. Open Try It Yourself. The lab page includes the <base> tag.

Example 3 — document vs Element

Nodes in the same document normally share the same base URL.

JavaScript
const el = document.body;
const same = document.baseURI === el.baseURI;

console.log(same);              // true
console.log(document.baseURI);
console.log(el.baseURI);
Try It Yourself

How It Works

  1. Both read the document base. Algorithm is document-scoped (MDN).
  2. Equality is usually true. Same containing document.
  3. Still read the node you care about. Clearer when debugging.
  4. Compare with document.URL. URL is the document location; base may differ if <base> is set.

Example 4 — Resolve a Relative URL

Turn a relative path into an absolute URL using the node’s base.

JavaScript
const el = document.body;
const absolute = new URL("images/photo.jpg", el.baseURI).href;

console.log(el.baseURI);
console.log(absolute);
// → …/images/photo.jpg (joined against the base)
Try It Yourself

How It Works

  1. Pass base as the second argument. URL joins relative to absolute.
  2. Uses the node’s base. Honors <base href> if present.
  3. Read .href. Full absolute string.
  4. Prefer this over string concat. Handles trailing slashes correctly.

Example 5 — Read-Only Assignment

Assigning to baseURI is rejected — change base with <base> instead.

JavaScript
const el = document.documentElement;
try {
  el.baseURI = "https://example.com/hacked/";
  console.log("Unexpected: assignment seemed to work");
} catch (err) {
  console.log("Assignment rejected:", err.name);
}
console.log("Still:", el.baseURI);
Try It Yourself

How It Works

  1. Property is read-only (MDN). Setter throws in strict mode.
  2. Catch the error. Typically TypeError.
  3. Value unchanged. Still the real document base.
  4. To change the base. Use <base href> in HTML, not assignment.

Edge Cases & Pitfalls

Check these when relative links resolve to the wrong place.

base

First <base href> wins

Extra base elements are ignored for this algorithm. Put the intended one first (MDN).

readonly

Cannot assign baseURI

It is read-only. Change the document URL or add <base> instead (MDN).

live

Value can change between reads

Computed on each access — if conditions change, the next read can differ (MDN).

vs URL

baseURI ≠ always document.URL

With a <base> tag, base can differ from the address bar / document.URL.

Compatibility

Browser Support

Node.baseURI is Baseline Widely available (MDN, since July 2015). Safe to use in all modern browsers.

✓ Baseline · Widely available

Node.baseURI

Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. Read-only absolute base URL of the containing document.

99% Browser support
Google Chrome baseURI · full support
Full support
Microsoft Edge baseURI · Chromium
Full support
Apple Safari baseURI · full support
Full support
Mozilla Firefox baseURI · full support
Full support
Opera baseURI · full support
Full support
Internet Explorer baseURI · legacy
Legacy support
Node.baseURI Excellent

Bottom line: Use freely. Remember it is read-only and may follow <base href> instead of the address bar.

Analysis

Performance Notes

ApproachCostBest for
Read baseURI onceCheapResolve paths, debug bases
Read in a tight loopUnnecessaryCache the string if reused often
new URL(rel, base)CheapCorrect absolute joins

Reading baseURI is inexpensive. Cache it if you resolve many paths in one pass against an unchanged document.

Remember

Key Takeaways

  • Role: absolute base URL of the document that contains the node.
  • Default: document location; first <base href> can override.
  • Resolve: new URL(rel, node.baseURI).href.
  • Read-only: do not assign — use <base> to change the base.

One line: node.baseURI tells you the absolute base URL used to resolve relative links for that node’s document.

Frequently Asked Questions

A read-only string: the absolute base URL of the document that contains the node. The browser uses that base when turning relative URLs into absolute ones (for example img src or a href) (MDN).
No. MDN marks Node.baseURI as Baseline Widely available (since July 2015). It is a standard DOM property — not Deprecated, Experimental, or Non-standard.
By default the base URL matches the document location (window.location). If the HTML document has a <base href="...">, the href of the first such base element is used instead (MDN).
No. The property is read-only. Its value is computed each time you read it, so it can change if the document URL or <base> changes (MDN).
For nodes in the same document they normally match, because baseURI comes from the containing document’s base URL algorithm. Always read it on the node you care about when debugging.
Use the URL constructor: new URL("images/photo.jpg", node.baseURI).href. That returns an absolute URL using the node’s base.

Next: childNodes

Learn how node.childNodes gives a live list of child nodes.

childNodes 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)

10 people found this page helpful

JavaScript EventTarget Constructor JavaScript Node childNodes Property