JavaScriptでidを取得する方法

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

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

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

HTML

JavaScript

thisは関数を呼び出したオブジェクト自身を参照するので、getId()の引数eleにはInput要素オブジェクト(Input Element Object)が渡されます。getId()では、input要素オブジェクトのプロパティとしてidを取得するために、ele.idと記述しています。これは、次のように記述しても同じです。

HTML

JavaScript

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

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

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

HTML

JavaScript

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて