Element: getAttributeNames() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年10月.

getAttributeNames() はElement インターフェイスのメソッドで、この要素の属性名を文字列のArray で返します。要素に属性がない場合は、空の配列を返します。

getAttributeNames() をgetAttribute() と共に使用すると、Element.attributes にアクセスするよりメモリー効率やパフォーマンスが良くなります。

getAttributeNames() から返される名前は修飾属性名です。すなわち、名前空間接頭辞がついた属性であり、名前空間接頭辞（実際の名前空間ではない）にコロンが続き、属性名が続きます（例えばxlink:href）。名前空間接頭辞のない属性は、そのままの名前になります（例えばhref）。

構文

getAttributeNames()

名前空間接頭辞のある属性については、getAttributeNames() は属性名と一緒に名前空間接頭辞を返します。
名前空間接頭辞のない属性については、getAttributeNames() は属性名のみをそのまま返します。

以下のことを理解することが重要です。

DOM には名前空間に所属していても、名前空間接頭辞がない場合があります。
名前空間に所属しているが、名前空間接頭辞のない DOM 内の属性については、getAttributeNames() は属性名だけを返し、その属性が名前空間に所属していることを示しません。

以下の例では、このような「名前空間に所属しているが、名前空間接頭辞がない」場合を示しています。

const element = document.createElement("a");// "href" 属性を名前空間なし、名前空間接頭辞なしで設定element.setAttribute("href", "https://example.com");// "href" 属性を名前空間あり、 "xlink" 名前空間接頭辞で設定element.setAttributeNS(  "http://www.w3.org/1999/xlink",  "xlink:href",  "https://example.com",);// "show" 属性を名前空間あり、名前空間接頭辞なしで設定element.setAttributeNS("http://www.w3.org/1999/xlink", "show", "new");// 要素の属性を反復処理するfor (const name of element.getAttributeNames()) {  const value = element.getAttribute(name);  console.log(name, value);}// 出力結果:// href https://example.com// xlink:href https://example.com// show new