JavaScript Node lookupPrefix() Method

What You’ll Learn

The Node.lookupPrefix() method turns a namespace URI into a bound prefix on a node. Learn why default namespaces often return null, how it inverts lookupNamespaceURI(), and the special null / empty-string rules.

Introduction

A prefix is the short label before a colon in names like xlink:href. It stands for a long namespace URI. When you already know the URI and need the short label used on a node, lookupPrefix(uri) is the tool.

Think of it as the reverse of lookupNamespaceURI(prefix): one goes prefix → URI, the other URI → prefix. A default namespace has a URI but no prefix, so looking up that URI often returns null.

Understanding lookupPrefix()

MDN: returns the prefix string for a given namespace URI if present, otherwise null. If several prefixes could match, the first prefix is returned.

• Found — returns a prefix string (for example "xlink").
• Not found — returns null.
• null / "" argument — always returns null (per MDN).
• Default namespace — has a URI but no prefix, so lookup often yields null.

📝 Syntax

const prefix = node.lookupPrefix(namespace);

Parameters

• namespace — String containing the namespace URI to look up. Empty string is equivalent to null; both cause null to be returned. Required in the signature, but may be null.

Return value

A string containing the corresponding prefix, or null if none has been found.

📋 Return Value Rules (MDN)

⚖️ lookupPrefix() vs lookupNamespaceURI()

⚠️ HTML Documents vs Namespaces

MDN: in an HTML document, most xmlns: attributes are ignored (except xmlns:xlink). Firefox may report null namespaces for elements, while Chrome and Safari often set HTML, SVG, and MathML defaults.

For reliable learning demos, use createElementNS and setAttributeNS, or run scripts in a standalone SVG document.

Examples Gallery

Examples follow MDN Node.lookupPrefix() ideas, using createElementNS for clearer results. Use View Output or Try It Yourself.

const SVG_NS = "http://www.w3.org/2000/svg";
const XLINK_NS = "http://www.w3.org/1999/xlink";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", XLINK_NS);

console.log(svg.lookupPrefix(XLINK_NS)); // "xlink"
console.log(svg.lookupNamespaceURI("xlink")); // XLINK_NS

xlink
http://www.w3.org/1999/xlink

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");

console.log(svg.lookupNamespaceURI(null)); // SVG_NS (default)
console.log(svg.lookupPrefix(SVG_NS));     // null (no prefix)
console.log(svg.namespaceURI);             // SVG_NS

http://www.w3.org/2000/svg
null
http://www.w3.org/2000/svg

const el = document.createElement("div");

console.log(el.lookupPrefix(null)); // null
console.log(el.lookupPrefix(""));   // null
console.log(el.lookupPrefix(null) === el.lookupPrefix("")); // true

null
null
true

const SVG_NS = "http://www.w3.org/2000/svg";
const XLINK_NS = "http://www.w3.org/1999/xlink";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", XLINK_NS);

const uri = svg.lookupNamespaceURI("xlink");
const prefix = svg.lookupPrefix(uri);

console.log(uri);    // XLINK_NS
console.log(prefix); // "xlink"
console.log(prefix === "xlink"); // true

http://www.w3.org/1999/xlink
xlink
true

const XLINK_NS = "http://www.w3.org/1999/xlink";
const frag = document.createDocumentFragment();

console.log(frag.lookupPrefix(XLINK_NS)); // null
console.log(frag.lookupPrefix(null));     // null
console.log(String(frag.lookupPrefix(XLINK_NS)));

null
null
null

🚀 Common Use Cases

• Finding which short prefix is bound to a known URI (for example XLink).
• Debugging prefixed attributes such as xlink:href on SVG.
• Pairing with lookupNamespaceURI in XML/SVG tooling helpers.
• Teaching that default namespaces are prefix-less (URI without a short name).
• Guarding code that must not assume a prefix exists for every URI.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• HTML documents can disagree across browsers; prefer createElementNS for demos.
• Related: normalize(), lookupNamespaceURI(), isDefaultNamespace(), isSameNode(), ownerDocument, JavaScript hub.

💡 Best Practices