JavaScript Element getAttributeNodeNS() Method

What You’ll Learn

Element.getAttributeNodeNS() is an instance method that returns the Attr node for a namespaced attribute. Learn namespace URI + qualified name, how it compares to getAttributeNode() and getAttributeNS(), 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() or getAttributeNode(). SVG and XML documents also use namespaced attributes such as xlink:href, which belong to a namespace URI.

getAttributeNodeNS(namespace, nodeName) looks up that namespaced attribute and returns the full Attr object—not just the string value.

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

Understanding the getAttributeNodeNS() Method

Calling el.getAttributeNodeNS(namespace, nodeName) finds an attribute that matches both the namespace URI and the qualified name, then returns its Attr node.

• It is an instance method on Element.
• namespace — the attribute’s namespace URI (e.g. XLink namespace).
• nodeName — the qualified name (e.g. "xlink:href").
• Returns an Attr node, or null if not found.
• More specific than getAttributeNode() for namespaced attributes (MDN).
• Setter counterpart: setAttributeNodeNS() (MDN).

📝 Syntax

General form of Element.getAttributeNodeNS (MDN):

getAttributeNodeNS(namespace, nodeName)

Parameters

• namespace — a string specifying the namespace URI of the attribute.
• nodeName — a string specifying the qualified name of the attribute.

Return value

The Attr node for the specified namespaced attribute, or null if it does not exist.

Common patterns

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

const hrefAttr = link.getAttributeNodeNS(XLINK, "xlink:href");
if (hrefAttr) {
  console.log(hrefAttr.value);
  console.log(hrefAttr.namespaceURI);
}

// Value only? Use getAttributeNS:
console.log(link.getAttributeNS(XLINK, "xlink:href"));

Examples Gallery

Examples follow MDN Element.getAttributeNodeNS() 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 hrefAttr = anchor.getAttributeNodeNS(XLINK, "xlink:href");

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

https://example.com

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

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

null

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

console.log(attr.namespaceURI);
// "http://www.w3.org/1999/xlink"

console.log(attr.name);
// "xlink:href"

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

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

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

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

object
string
true

const XLINK = "http://www.w3.org/1999/xlink";
const el = document.createElementNS("http://www.w3.org/2000/svg", "a");

el.setAttributeNS(XLINK, "xlink:href", "https://example.com");
el.setAttributeNS(XLINK, "xlink:show", "new");

const showAttr = el.getAttributeNodeNS(XLINK, "xlink:show");

console.log(showAttr.value);
// "new"

new

🚀 Common Use Cases

• Inspecting SVG xlink:href and similar namespaced links.
• XML tooling that needs Attr.namespaceURI metadata.
• Library code that moves Attr nodes with setAttributeNodeNS().
• Teaching the difference between HTML and XML/SVG attribute models.
• Verifying namespace URIs after parsing XML documents.
• Legacy DOM code that works with Attr objects rather than strings.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• For non-namespaced HTML attributes, use getAttributeNode() (MDN).
• Namespace URI must be exact—not the prefix alone.
• Setter counterpart: setAttributeNodeNS().
• Value-only reads: getAttributeNS().
• Related: getAttributeNode(), getAttribute(), JavaScript hub.

💡 Best Practices