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