Attr: localName property

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.

See full compatibility

The read-only localName property of the Attr interface returns the local part of the qualified name of an attribute, that is the name of the attribute, stripped from any namespace in front of it. For example, if the qualified name is xml:lang, the returned local name is lang, if the element supports that namespace.

The local name is always in lower case, whatever case at the attribute creation.

Note: HTML only supports a fixed set of namespaces on SVG and MathML elements. These are xml (for the xml:lang attribute), xlink (for the xlink:href, xlink:show, xlink:target and xlink:title attributes) and xpath.

That means that the local name of an attribute of an HTML element is always be equal to its qualified name: Colons are treated as regular characters. In XML, like in SVG or MathML, the colon denotes the end of the prefix and what is before is the namespace; the local name may be different from the qualified name.

Value

A string representing the local part of the attribute's qualified name.

Example

The following example displays the local name of the first attribute of the two first elements, when we click on the appropriate button. The <svg> element is XML and supports namespaces leading to the local name (lang) to be different from the qualified name xml:lang. The <label> element is HTML, that doesn't support namespaces, leading to a local name and the qualified name to be both xml:lang.

HTML

html

<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Local part of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>

JavaScript

const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.localName;
  });
  i++;
}

Specifications

Specification
DOM # dom-attr-localname

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`localName`	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote Full support	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote Full support	Firefox – Full support Firefox 1 (Release date: 2004-11-09) footnote Full support	Opera – Full support Opera 12.1 (Release date: 2012-11-20) footnote Full support	Safari – Full support Safari 1 (Release date: 2003-06-23) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – Full support Firefox for Android 4 (Release date: 2011-03-29) footnote Full support	Opera Android – Full support Opera Android 12.1 (Release date: 2012-10-09) footnote Full support	Safari on iOS – Full support Safari on iOS 1 (Release date: 2007-06-29) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 1 (Release date: 2007-06-29) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support