JavaScriptのプログラムからHTML要素のidを取得する方法について説明します。
HTML要素オブジェクトのプロパティとしてidを取得する
HTML要素のidは、HTML要素オブジェクトのプロパティとして取得することができます。次のサンプルプログラムでは、ボタンをクリックすると<input>要素に付与されたidを取得して表示します。
HTML
|
1 |
<input type="button" id="id01" value="show ID" onclick="getId(this);"> |
JavaScript
|
1 2 3 4 |
function getId(ele){ var id_value = ele.id; // eleのプロパティとしてidを取得 console.log(id_value); //「id01」 } |
thisは関数を呼び出したオブジェクト自身を参照するので、getId()の引数eleにはInput要素オブジェクト（Input Element Object）が渡されます。getId()では、input要素オブジェクトのプロパティとしてidを取得するために、ele.idと記述しています。これは、次のように記述しても同じです。
HTML
|
1 |
<input type="button" id="id01" value="show ID" oncick="getId(this.id);"> |
JavaScript
|
1 2 3 |
function getId(id_value){ console.log(id_value); } |
thisはinput要素オブジェクトを参照しているので、this.idでinput要素のidを取得することができます。
getAttribute()を使ってidを取得する
次のサンプルプログラムは、先程と同様input要素のidを取得するプログラムですが、下の例ではgetAttribute()を使っています。
HTML
|
1 |
<input type="button" id="id01" value="show ID" oncick="getId(this);"> |
JavaScript
|
1 2 3 4 |
function getId(ele){ var attr = ele.getAttribute("id"); // input要素のid属性の値を取得 console.log(attr); //「id01」 } |
getAttribute()は、HTML要素に付与された属性の値を返します。idに限らず様々な属性値を取得することができます。属性に値が付与されていない場合は、nullもしくは空文字列を返します（ブラウザによって異なります）。
