JavaScript Element getAttributeNS() Method

What You’ll Learn

Element.getAttributeNS() is an instance method that returns the string value of a namespaced attribute. Learn namespace URI + qualified name, how it compares to getAttribute() and getAttributeNodeNS(), common SVG xlink:href usage, and five try-it labs aligned with MDN.

Introduction

Plain HTML attributes like id or class usually work with getAttribute(). SVG and XML documents also use namespaced attributes such as xlink:href, which belong to a namespace URI.

getAttributeNS(namespace, name) looks up that namespaced attribute and returns its value as a string—or null if it does not exist.

This page is part of JavaScript Element. Pair it with the non-namespaced getAttribute() tutorial.

Understanding the getAttributeNS() Method

Calling el.getAttributeNS(namespace, name) finds an attribute that matches both the namespace URI and the qualified name, then returns its value as a string.

• It is an instance method on Element.
• namespace — the attribute’s namespace URI (e.g. XLink namespace).
• name — the qualified name (e.g. "xlink:href").
• Returns a string, or null if not found (DOM4; MDN).
• More specific than getAttribute() for namespaced attributes (MDN).
• Setter counterpart: setAttributeNS() (MDN).

📝 Syntax

General form of Element.getAttributeNS (MDN):

getAttributeNS(namespace, name)

Parameters

• namespace — a string specifying the namespace in which to look for the attribute.
• name — a string specifying the qualified name of the attribute to look for.

Return value

The string value of the specified attribute, or null if it does not exist. MDN notes that very old browsers sometimes returned an empty string instead of null—use hasAttributeNS() when that matters.

Common patterns

const XLINK = "http://www.w3.org/1999/xlink";
const link = document.querySelector("svg a");

const href = link.getAttributeNS(XLINK, "xlink:href");
if (href) {
  console.log(href);
}

// Safer existence check (MDN):
if (link.hasAttributeNS(XLINK, "xlink:href")) {
  console.log(link.getAttributeNS(XLINK, "xlink:href"));
}

Examples Gallery

Examples follow MDN Element.getAttributeNS() patterns. Use View Output or Try It Yourself for each case.

const XLINK = "http://www.w3.org/1999/xlink";
const anchor = document.querySelector("svg a");

const href = anchor.getAttributeNS(XLINK, "xlink:href");

console.log(href);
// "https://example.com"

https://example.com

const anchor = document.querySelector("svg a");

console.log(
  anchor.getAttributeNS("http://wrong.namespace", "xlink:href")
);
// null

null

const TEST_NS = "http://www.example.com/2014/test";
const circle = document.getElementById("target");

console.log(circle.getAttributeNS(TEST_NS, "foo"));
// "Hello namespaced attribute!"

Hello namespaced attribute!

const TEST_NS = "http://www.example.com/2014/test";
const circle = document.getElementById("target");

const viaNS = circle.getAttributeNS(TEST_NS, "foo");
const viaName = circle.getAttribute("test:foo");

console.log(viaNS);
console.log(viaName);
// Both return the same value in HTML documents

Foo value
Foo value

const XLINK = "http://www.w3.org/1999/xlink";
const anchor = document.querySelector("svg a");

const str = anchor.getAttributeNS(XLINK, "xlink:href");
const attr = anchor.getAttributeNodeNS(XLINK, "xlink:href");

console.log(typeof str);   // "string"
console.log(typeof attr);  // "object"
console.log(str === attr.value);
// true

string
object
true

🚀 Common Use Cases

• Reading SVG xlink:href and similar namespaced link URLs.
• XML/SVG tooling that reads custom namespace attribute values.
• Library code paired with setAttributeNS() for round-trip reads.
• Teaching the difference between HTML and XML/SVG attribute models.
• Verifying namespace URIs after parsing XML documents.
• Simple value reads without needing the full Attr object.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• For non-namespaced HTML attributes, use getAttribute() (MDN).
• Namespace URI must be exact—not the prefix alone.
• Setter counterpart: setAttributeNS().
• Attr object reads: getAttributeNodeNS().
• MDN: use hasAttributeNS() before reading if the attribute might be missing on older browsers.
• Related: getAttribute(), getAttributeNodeNS(), JavaScript hub.

💡 Best Practices