Element.attributes- 要素の全属性を取得する
投稿日: / 更新日:
JavaScriptの、Elementオブジェクトのattributes
は全ての属性を取得するプロパティです。
説明
Elementオブジェクトのattributesプロパティは、その要素の全ての属性を含んだノードマップ(≠配列)です。
<a id="syncer" href="https://syncer.jp" class="arayutw">SYNCER</a>
ノードマップとは配列に似たオブジェクトで、左から開始とした記述順がキー番号となって属性オブジェクトが含まれています。例えば、上記要素のattributesプロパティに含まれるノードマップは次の通りです。
// aElement = <a id="syncer" href="https://syncer.jp" class="arayutw">SYNCER</a>
// 全属性を取得
var nodeMap = aElement.attributes ;
// nodeMap[0] = idオブジェクト
// nodeMap[1] = hrefオブジェクト
// nodeMap[2] = classオブジェクト
くどいですが、キー番号の順番はHTMLに記述した順番通りです。同じ内容の要素でも、属性を記述する順番が違えば、ノードマップのキー番号は変わります。
<a class="arayutw" href="https://syncer.jp" id="syncer">SYNCER</a>
// aElement = <a class="arayutw" href="https://syncer.jp" id="syncer">SYNCER</a>
// 全属性を取得
var nodeMap = aElement.attributes ;
// nodeMap[0] = classオブジェクト
// nodeMap[1] = hrefオブジェクト
// nodeMap[2] = idオブジェクト
サンプルコード
<a id="target" href="https://syncer.jp" class="arayutw">SYNCER</a>
// 要素を取得 ( → <a id="target" href="https://syncer.jp" class="arayutw">SYNCER</a> )
var aElement = document.getElementById( "target" ) ;
// 全属性を取得
var attributes = aElement.attributes ;
// attributes[0] = idオブジェクト
// attributes[1] = hrefオブジェクト
// attributes[2] = classオブジェクト
デモ
Element.attributes
を取得して表示します。コンソールでオブジェクトの中身を確認できます。
構文
readonly Nodemap attributes = Element.attributes
返り値
項目 | 説明 |
---|---|
attributes | 全ての属性を含んだノードマップ(≠配列)。キー番号は左から開始とした記述順。 |
関連項目
- Location - ブラウザロケーションのオブジェクト。
- Location.assign() - コンテンツをロードして表示する。
- Location.reload() - ドキュメントをリロードする。
- Location.replace() - 現在のURLを置換する。
外部リンク
- HTML Living Standard - WHATWGによる仕様書。
- W3C勧告 - W3Cによる規格策定の最終段階。