JavaScriptで属性の値を設定・取得する方法についてまとめました。
目次
属性の値を設定・取得する方法
以下の２つの方法があります。
1. set / getAttributeメソッド を使用する
2. 要素オブジェクトのプロパティ を使用する
以降では、それぞれの使用方法について記載します。
1. setAttribute / getAttribute
getElementById などで取得した要素オブジェクトに対して set/getAttributeメソッド を使うと、簡単に属性値を操作することができます。
以下の例では、ボタン要素の属性値を操作します。
|
1 |
<button id="btn1" class="btn-class" >ボタン</button> |
属性値の設定
button要素のclass属性の値を setAttributeメソッドを使用して変更します。
|
1 2 |
var btnObj = document.getElementById('btn1'); // button要素を取得 btnObj.setAttribute('class', 'btn-class2'); // class属性の値を'btn-class2'に設定 |
変更後の button要素は次のようになります。
|
1 |
<button id="btn1" class="btn-class2">ボタン</button> |
属性値の取得
続いて、button要素のclass属性の値を getAttributeメソッドを使用して取得します。
|
1 2 |
var btnObj = document.getElementById('btn1'); // button要素を取得 btnObj.getAttribute('class'); // class属性の値を取得 |
2. 要素オブジェクトのプロパティ
getElementById などで取得した要素オブジェクトのプロパティを使用して属性値を操作します。
先ほどの例と同じく、button要素に対して操作を行う例です。
属性値の設定
buttonオブジェクトのclassNameプロパティを使用します。
|
1 2 |
var btnObj = document.getElementById('btn1'); // button要素を取得 btnObj.className = 'btn-class2'; // class属性の値を 'btn-class2'に設定 |
属性値の取得
続いて、button要素のclass属性の値を classNameプロパティを使用して取得します。
|
1 2 |
var btnObj = document.getElementById('btn1'); btnObj.className; |
まとめ
“set/getAttribute” と “要素オブジェクトのプロパティ” を使用して属性値を操作する方法についてまとめました。
どちらでも、属性値の操作はできますが、個人的には属性値の名称のまま使用できる、set/getAttribute の方が使用しやすいと思います。
また、なんで属性とその要素のプロパティで名前が違うの？？（class と classNameなど）と思っていたのですが、例えば classNameの場合は、こちらのサイト”element.className – MDN – Mozilla” に次の記載がありました。
“class” という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために className という名称となっています。
納得ですね！
となると、やはりset/getAttributeの方が属性名をそのまま使用できるので、コーディングしやすいと思います。