JavaScript Node baseURI Property

What You’ll Learn

The Node.baseURI property returns the absolute base URL of the document containing a node. Browsers use that base to resolve relative URLs. Learn the default (document location), how <base href> overrides it, and how to build absolute URLs with new URL()—with five examples and try-it labs.

Introduction

Every HTML page lives at a URL. Relative paths like images/logo.png or ../styles.css only make sense when the browser knows a base URL. node.baseURI exposes that absolute base for the document that owns the node.

Elements such as <img src>, <a href>, and SVG href / xlink:href rely on the same idea. Reading baseURI helps you debug link resolution and build absolute URLs in JavaScript.

Understanding baseURI

MDN: the read-only baseURI property of the Node interface returns the absolute base URL of the document containing the node. The value is computed each time you access the property, so it can change if conditions change.

• Default — the document location (related to window.location / the document URL).
• HTML override — if an HTML document has a <base href="…">, that first matching href is used instead.
• Read-only — you cannot assign node.baseURI = "…".
• Purpose — resolve relative URLs to absolute ones in the browser and in your scripts.

📝 Syntax

const absoluteBase = node.baseURI;

Return value

A string representing the absolute base URL of the node’s document.

Examples Gallery

Examples follow MDN Node.baseURI patterns. Use View Output or Try It Yourself for each case.

const output = document.querySelector("output");
output.value = output.baseURI;
// Absolute URL of this document (page location)

https://www.example.com/path/page.html
(exact string matches your page URL)

<base href="https://developer.mozilla.org/modified_base_uri/" />
<output>Not calculated</output>
<script>
  const output = document.querySelector("output");
  output.value = output.baseURI;
  // "https://developer.mozilla.org/modified_base_uri/"
</script>

https://developer.mozilla.org/modified_base_uri/

const el = document.body;
console.log(document.baseURI === el.baseURI); // true (same document)
console.log(document.baseURI);

true
https://www.example.com/path/page.html

const el = document.querySelector("main");
const absolute = new URL("images/photo.jpg", el.baseURI).href;
console.log(absolute);
// e.g. "https://www.example.com/path/images/photo.jpg"
// (depends on el.baseURI)

https://www.example.com/.../images/photo.jpg
(joined from baseURI + relative path)

const el = document.documentElement;
try {
  el.baseURI = "https://example.com/hacked/";
} catch (err) {
  console.log("Assignment rejected:", err.name);
}
console.log("Still:", el.baseURI);
// To change the base, use a <base href> in the document (or navigate).

Assignment rejected: TypeError
Still: https://www.example.com/...
(exact error text can vary by browser / strict mode)

🚀 Common Use Cases

• Debug relative links — print el.baseURI when assets load from the wrong folder.
• Build absolute URLs in JS — new URL(path, node.baseURI) for fetch or sharing.
• Respect site <base> — match the same base the HTML engine uses.
• CMS / preview iframes — understand why relative paths resolve to a preview host.
• SVG / mixed documents — confirm the base used for href resolution.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Read-only; value may change when the document URL or <base> changes.
• Only the first HTML <base href> matters for this algorithm.
• Prefer new URL(rel, base) over string concatenation for joining paths.
• Related learning: Window, EventTarget, JavaScript hub.

💡 Best Practices