getElementById()を使ってidからHTML要素を取得する方法について説明します。
getElementById()の記述方法
getElementById()はdocumentオブジェクトのメソッドですので、以下のように使用します。
|
1 |
document.getElementById('id名'); |
HTML要素オブジェクトを取得する
getElementById()は、引数に指定したid名を手がかりにHTML要素オブジェクトを特定して返すメソッドです。次の例は「id01」というidを持つHTML要素を探し出し、それに一致した要素（ここでは<p>要素）のオブジェクトを返すプログラムです。
HTML
|
1 2 |
<p id="id01">「id01」をidとして持つdp要素</p> <input type="button" value="ok" onclick="showElement();"> |
JavaScript
|
1 2 3 4 |
function showElement(){ var ele = document.getElementById('id01'); // HTML要素オブジェクトを取得 console.log(ele); //[object HTMLParagraphElement] } |
idはページ中のHTML要素に対して一意に与えられるため、返り値のHTML要素オブジェクトもひとつです。この点が、複数の要素を返すこともあるgetElementsByTagName()やgetElementsByClassName()とは異なります。
getElementById()のプロパティを使う
getElementById()はHTML要素のオブジェクトを返すので、オブジェクトの持つ様々なプロパティを使うことができます。よく使う、value, innnerHTMLについて紹介します。
valueプロパティを使ってBMIを計算する
次のプログラムはテキストボックスに入力された体重と身長からBMI値を求めアラート表示するプログラムです。BMIは身長/体重の2乗で求められます。
HTML
|
1 2 3 |
体重を入力して下さい:<input type="text" id="id01"><br/> 身長をメートルで入力して下さい:<input type="text" id="id02"><br/> <input type="button" value="計算" onclick="calcBmi();"> |
JavaScript
|
1 2 3 4 5 6 7 8 9 |
//入力された体重と身長からBMI値を計算するプログラム function calcBmi(){ var weight = document.getElementById('id01').value; // idが「id01」のテキストボックスに入力された値を取得して変数weightに代入 var height = document.getElementById('id02').value; weight = Number(weight); // 入力された文字列を数値に変換する height = Number(height); var bmi = height / (weight * weight); // BMIを計算 alert("あなたのBMI値は" + bmi + "です。"); // 結果を表示 } |
テキストボックスに入力された文字列はvalueプロパティで取得します。ただし、valueプロパティの値は文字列なので、数値として計算する場合にはNumber()等を使って明示的に数値型に変換するようにしましょう。
innerHTMLプロパティを使ってHTMLの内容を書き換える
次のサンプルは、<p>タグの中身を書き換えるプログラムです。HTMLを書き換えるには、innnerHTMLプロパティを使います。
HTML
|
1 2 |
<p id="id01">我が輩は猫である。</p> <input type="button" value="change" onclick="change();"> |
JavaScript
|
1 2 3 |
function change(){ document.getElementById('id01').innerHTML = "我が輩は犬である。"; } |
innerHTMLには、取得したHTML要素のタグを除いた部分が入ります。上の例では、innerHTMLには<p></p>を除いた「我が輩は猫である。」という文字列が入り、それを書き換えています。
上記のプログラムは次のプログラムと等価です。
|
1 2 3 4 5 |
function change(){ var str = document.getElementById('id01').innerHTML; str = "我が輩は犬である。"; document.getElementById('id01').innerHTML = str; } |
変数strの値を書き換えただけではHTML要素の中身が書き変わらないことに注意してください。
