Element: getAttributeNS() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

ThegetAttributeNS() method of theElementinterface returns the string value of the attribute with the specified namespace andname. If the named attribute does not exist, the value returned will either benull or"" (the empty string); seeNotes fordetails.

If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use thegetAttribute() method instead.

Syntax

getAttributeNS(namespace, name)

Parameters

namespace: The namespace in which to look for the specified attribute.
name: The name of the attribute to look for.

Return value

The string value of the specified attribute. If the attribute doesn't exist, the resultisnull.

Note:Earlier versions of the DOM specification hadthis method described as returning an empty string for non-existent attributes, but itwas not typically implemented this way since null makes more sense. The DOM4specification now says this method should return null for non-existent attributes.

Examples

The following SVG document reads the value of thefoo attribute in acustom namespace.

xml

<svg xmlns="http://www.w3.org/2000/svg"    xmlns:test="http://www.example.com/2014/test" width="40" height="40">  <circle cx="12" cy="12" r="10" stroke="#444444"      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>  <script>    const ns = 'http://www.example.com/2014/test';    const circle = document.getElementById('target');    console.log(`attribute test:foo: "${circle.getAttributeNS(ns, 'foo')}"`);  </script></svg>

In an HTML document, the attribute has to be accessed withtest:foo sincenamespaces are not supported.

html

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:test="http://www.example.com/2014/test"  width="40"  height="40">  <circle       cx="12"    cy="12"    r="10"    stroke="#444444"    stroke-width="2"    fill="none"    test:foo="Foo value" /></svg>

const ns = "http://www.example.com/2014/test";const circle = document.getElementById("target");console.log(`Attribute value: ${circle.getAttribute("test:foo")}`);

Notes

getAttributeNS() differs fromgetAttribute()in that it allows you to further specify the requested attribute asbeing part of a particular namespace, as in the example above, where the attribute ispart of the fictional "test" namespace.

Prior to the DOM4 specification, this method was specified to return an empty stringrather than null for non-existent attributes. However, most browsers instead returnednull. Starting with DOM4, the specification now says to return null. However, some olderbrowsers return an empty string. For that reason, you should usehasAttributeNS() to check for an attribute'sexistence prior to callinggetAttributeNS() if it is possible that therequested attribute does not exist on the specified element.