ywork2020.com

Title

要素の属性名を配列として取得する

目次 (INDEX)

getAttributeNamesとは

ここで説明するgetAttributeNames とは次の語句からなるjavascriptのメソッドです。
get
読み: ゲット
意味: 取得する
attribute
読み: アトリビュート
意味: 属性
name
読み: ネーム
意味: 名前

目次に戻る

getAttributeNamesメソッドの概要

このメソッドは、要素がもつ属性の名前を文字列値の Array で返します。 Array とは配列のことです。

なお、要素に属性がない場合は、空の配列を返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var arrAttributeNames = element.getAttributeNames();

目次に戻る

サンプルコードと実行結果

ここでは、output要素に3つの属性をつけたものを題材にしました。 この要素の属性名を配列としてして取得したのち、この要素のコンテンツに配列の値を順番に出力していきます。

サンプルコード: HTML
<body>
	<output id="idOutput" class ="clsOutput" style="font-size: 2em;"></output>
	<script>...</script>
</body>
  • 02: output (この要素のコンテンツに、この要素の属性名を書き出します。)
  • 03: script (プログラムを実行します。内容は script コードを参照してください。)
サンプルコード: script
<script>
	let elmOutput = document.getElementById("idOutput");
	let arrAttrNames = elmOutput.getAttributeNames();
	for(i = 0; i < arrAttrNames.length; i++){
		elmOutput.insertAdjacentHTML("beforeend", arrAttrNames[i] + "<br>");
	}
</script>
  • 02: elmOutput (識別子=idOutput の要素をElementオブジェクトとして取得します。)
  • 03: arrAttrNames (getAttributeNames()の戻り値が Array として代入されます。)
  • 04-06: for文 (arrAttrNamesのインデックス数だけ処理ブロックを繰り返します。)
  • 05: insertAdjacentHTML() (arrAttrNamesの値をインデクス数だけコンテンツに追加します。)
実行結果:

結果: id="idOutput"

目次に戻る