Attr: localName 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

Attr 接口中只读的 localName 属性会返回属性的限定名称（qualified name）的本地部分（local part），也就是属性的名称，去除了前面的命名空间（namespace）。例如，如果限定名称是 xml:lang，那么返回的本地名称是 lang（前提是该元素支持该命名空间）。

无论在属性创建时使用的是何种大小写，本地名称始终是小写的。

注意： HTML 只支持 SVG 和 MathML 元素上固定的命名空间。这些命名空间包括 xml（用于 xml:lang 属性）、xlink（用于 xlink:href、xlink:show、xlink:target 和 xlink:title 属性）以及 xpath。

这意味着 HTML 元素的属性的本地名称始终与其限定名称相等：冒号会被视为普通字符。而在 XML 中（例如 SVG 或 MathML），冒号表示前缀的结束，冒号之前的内容是命名空间；此时本地名称可能与限定名称不同。

<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++;
}