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"