JavaScriptでidから要素を取得する方法:getElementById()

getElementById()を使ってidからHTML要素を取得する方法について説明します。

getElementById()の記述方法

getElementById()はdocumentオブジェクトのメソッドですので、以下のように使用します。

HTML要素オブジェクトを取得する

getElementById()は、引数に指定したid名を手がかりにHTML要素オブジェクトを特定して返すメソッドです。次の例は「id01」というidを持つHTML要素を探し出し、それに一致した要素(ここでは<p>要素)のオブジェクトを返すプログラムです。

HTML

JavaScript

idはページ中のHTML要素に対して一意に与えられるため、返り値のHTML要素オブジェクトもひとつです。この点が、複数の要素を返すこともあるgetElementsByTagName()やgetElementsByClassName()とは異なります。

getElementById()のプロパティを使う

getElementById()はHTML要素のオブジェクトを返すので、オブジェクトの持つ様々なプロパティを使うことができます。よく使う、value, innnerHTMLについて紹介します。

valueプロパティを使ってBMIを計算する

次のプログラムはテキストボックスに入力された体重と身長からBMI値を求めアラート表示するプログラムです。BMIは身長/体重の2乗で求められます。

HTML

JavaScript

テキストボックスに入力された文字列はvalueプロパティで取得します。ただし、valueプロパティの値は文字列なので、数値として計算する場合にはNumber()等を使って明示的に数値型に変換するようにしましょう。

innerHTMLプロパティを使ってHTMLの内容を書き換える

次のサンプルは、<p>タグの中身を書き換えるプログラムです。HTMLを書き換えるには、innnerHTMLプロパティを使います。

HTML

JavaScript

innerHTMLには、取得したHTML要素のタグを除いた部分が入ります。上の例では、innerHTMLには<p></p>を除いた「我が輩は猫である。」という文字列が入り、それを書き換えています。

上記のプログラムは次のプログラムと等価です。

変数strの値を書き換えただけではHTML要素の中身が書き変わらないことに注意してください。


Welcome to UX MILK

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

このサイトについて

UX MILKのディレクター募集