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全ての属性を含んだノードマップ(≠配列)。キー番号は左から開始とした記述順。

関連項目

外部リンク