要素に設定された属性の一覧を取得(getAttributeNames)

要素には複数の属性を設定することができますが、 Element オブジェクトの attributes プロパティを参照するか getAttributeNames メソッドを使用することで設定されている属性の一覧を取得することができます。ここでは getAttributeNames メソッドの使い方について解説します。

(Last modified: )

属性の一覧を取得する(attributesプロパティ)

Element オブジェクトの attributes プロパティを参照すると、要素に設定されている属性の一覧を参照することができます。 

element.attributes

参照できる値は、属性名と属性値の情報が格納された Attr オブジェクトの集合である NamedNodeMap オブジェクトです。

NamedNodeMap オブジェクトでは length プロパティで格納されている Attr オブジェクトの数を参照できます。また item メソッドで引数に指定したインデックスの Attr オブジェクトを取得できます。そして Atrr オブジェクトでは name プロパティで属性名を、 value プロパティで属性値を参照できます。

例えば要素ノードに設定されている属性の一覧を取得するには次のように記述します。 

let element = document.getElementById('xxx');

// NamedNodeMap オブジェクトを取得
let attrs = element.attributes;

// 格納されている Attr オブジェクトの数だけ繰り返し
for(let i = 0 ; i < attrs.length ; i++) {
  // 属性名を取得
  console.log('属性名：' + attrs.item(i).name);

  // 属性値を取得
  console.log('属性値：' + attrs.item(i).value);
}

なお NamedNodeMap オブジェクトに Attr オブジェクトがどのような順番で格納されているのかは決まっておらず、実行環境によっては順番が代わる可能性があります。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性値の取得</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  <a href="http://www.example.com/" target="_black" class="address">リストランテ南青山</a>
  <div>東京都港区南青山</div>
</div>

<p>美味しかったです。</p>

<button onClick="getElement();">属性を取得</button>

<script>
function getElement(){
    let element = document.getElementById('shopinfo');
    let attrs = element.children[0].attributes;
    for(let i = 0 ; i < attrs.length ; i++) {
        console.log('属性名：' + attrs.item(i).name);
        console.log('属性値：' + attrs.item(i).value);
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素に設定されている属性を順番に取得しコンソールに出力します。

属性の一覧を取得する(attributesプロパティ)(1)

属性の一覧を取得する(getAttributeNamesメソッド)

Element オブジェクトの getAttributeNames メソッドは要素に設定されている属性名を要素とする配列を返します。書式は次の通りです。 

element.getAttributeNames()

配列には属性名が DOMString オブジェクトで格納されています。同じ Element オブジェクトの getAttribute メソッドを使用することで引数に指定した属性名の属性値を取得することもできます。

例えば要素ノードに設定されている属性の一覧を取得するには次のように記述します。 

let element = document.getElementById('xxx');

// 要素に設定されている属性名の配列を取得
let names = element.getAttributeNames();

// 格納されている属性名の数だけ繰り返し
for(let i = 0 ; i < names.length ; i++) {
  // 属性名を取得
  console.log('属性名：' + names[i]);

  // 属性値を取得
  console.log('属性値：' + element.getAttribute(names[i]));
}
サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性値の取得</title>
</head>
<body>

<p>今日は外でランチを食べました。</p>

<div id="shopinfo">
  <a href="http://www.example.com/" target="_black" id="shop">リストランテ南青山</a>
  <div>東京都港区南青山</div>
</div>

<p>美味しかったです。</p>

<button onClick="getElement();">属性を取得</button>

<script>
function getElement(){
    let element = document.getElementById('shopinfo').children[0];
    let names = element.getAttributeNames();

    for(let i = 0 ; i < names.length ; i++) {
        console.log('属性名：' + names[i]);
        console.log('属性値：' + element.getAttribute(names[i]));
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードの最初の子要素を取得し、設定されている属性名の配列を取得したあと順番に属性名と属性値を取り出してコンソールに出力します。

属性の一覧を取得する(getAttributeNamesメソッド)(1)

-- --

getAttributeNames メソッドの使い方について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。