JavaScriptでidを取得する方法

JavaScriptのプログラムからHTML要素のidを取得する方法について説明します。

HTML要素オブジェクトのプロパティとしてidを取得する

HTML要素のidは、HTML要素オブジェクトのプロパティとして取得することができます。次のサンプルプログラムでは、ボタンをクリックすると<input>要素に付与されたidを取得して表示します。

HTML

<input type="button" id="id01" value="show ID" onclick="getId(this);">

JavaScript

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

<input type="button" id="id01" value="show ID" oncick="getId(this.id);">

JavaScript

function getId(id_value){
    console.log(id_value);
}

thisはinput要素オブジェクトを参照しているので、this.idでinput要素のidを取得することができます。

getAttribute()を使ってidを取得する

次のサンプルプログラムは、先程と同様input要素のidを取得するプログラムですが、下の例ではgetAttribute()を使っています。

HTML

<input type="button" id="id01" value="show ID" oncick="getId(this);">

JavaScript

function getId(ele){
    var attr = ele.getAttribute("id"); // input要素のid属性の値を取得
    console.log(attr); //「id01」
}

getAttribute()は、HTML要素に付与された属性の値を返します。idに限らず様々な属性値を取得することができます。属性に値が付与されていない場合は、nullもしくは空文字列を返します(ブラウザによって異なります)。