Attr: localName プロパティ
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.
localName は Attr インターフェイスのプロパティで、属性の修飾名のローカル部分、すなわち属性の名前からその前の名前空間を外したものを返します。例えば、修飾名が xml:lang であった場合、要素が名前空間に対応していればローカル名は lang となります。
ローカル名は、属性の作成時に大文字であっても小文字であっても、常に小文字になります。
メモ: HTML は SVG と MathML の要素に対して、固定された一連の名前空間のみに対応しています。これらは xml （xml:lang 属性）、 xlink （xlink:href, xlink:show, xlink:target, xlink:title 属性）、xpath です。
つまり、 HTML 要素の属性のローカル名は常にその修飾名と等しくなります。コロンは通常の文字として扱われます。 XML では、 SVG や MathML のように、コロンは接頭辞の終わりを表し、それ以前は名前空間となります。ローカル名は、修飾名と異なる場合があります。
値
属性の修飾名のローカル部分を表す文字列です。
例
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><svg> の場合の値を表示</button>
<button><label> の場合の値を表示</button>
</p>
<p>
<code>xml:lang</code> 属性のローカル部分:
<output id="result">なし。</output>
</p>
JavaScript コンテンツ
js
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++;
}
結果
仕様書
| Specification |
|---|
| DOM Standard # dom-attr-localname |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
Attr.nameプロパティはこの属性の修飾名を返し、Attr.prefixは名前空間接頭辞を返します。Element.localName()プロパティはElementのローカル名を返します。