DOM

：

：

Attr.localName プロパティ

　編集：2022.10.31 by T.A.

[Edge]。読取専用。→、

Attr の修飾名のローカル部分を表す文字列を返します。

mdn： 属性の修飾名のローカル部分、すなわち属性の名前からその前の名前空間を外したものを返します。例えば、修飾名が xml:lang であった場合、要素が名前空間に対応していればローカル名は lang となります。

mdn： ローカル名は、属性の作成時に大文字であっても小文字であっても、常に小文字になります。

mdn： メモ： HTML は SVG と MathML の要素に対して、固定された一連の名前空間のみに対応しています。これらは xml（xml:lang 属性）、xlink（xlink:href、xlink:show、xlink:target、xlink:title 属性）、xpath です。

つまり、HTML 要素の属性のローカル名は常にその修飾名と等しくなります。コロンは通常の文字として扱われます。XML では、SVG や MathML のように、コロンは接頭辞の終わりを表し、それ以前は名前空間となります。ローカル名は、修飾名と異なる場合があります。

構文
Attr.localName
Attr Attr。
値

文字列。

例
mdnより

次の例では、適切なボタンをクリックすると、2 つの最初の要素の最初の属性のローカル名が表示されます。<svg> 要素は XML であり、名前空間に対応しているので、ローカル名（lang）は修飾名 xml:lang と異なるものになります。<label> 要素は HTML で、名前空間に対応していないため、ローカル名と修飾名が共に xml:lang となります。

HTML： 

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

<button>Click me for <svg>…</button>
<button>Click me for <label>…</button>
<br><br>
Local part of the attribute <code>xml:lang</code>: <output id="result"><i>None.</i></output>

JavaScript： 

const elements = document.getElementsByClassName("struct");
const buttons = document.getElementsByTagName("button");
const result  = document.querySelector("#result");

function handleEvent(element) {
  return function(e) {
    attribute = element.attributes[0];
    result.value = attribute.localName;
  }
}

let i=0;
for (let button of buttons) {
  button.addEventListener('click', handleEvent(elements[i]));
  i++;
}

HTML： 

<svg id=IdSvg xml:lang="en-US" height="1" width="1">Click me</svg>

JavaScript： 

D=IdSvg.attributes[0];  //＝[object]：[object Attr]
	//namespaceURI＝[object]：null
	//prefix＝[object]：null
	//localName＝[string]：id
	//name＝[string]：id
	//value＝[string]：IdSvg
	//…
D=IdSvg.attributes[1];  //＝[object]：[object Attr]
	//namespaceURI＝[string]：http://www.w3.org/XML/1998/namespace
	//prefix＝[string]：xml
	//localName＝[string]：lang
	//name＝[string]：xml:lang
	//value＝[string]：en-US
	//…

→attributes。

テスト