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

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

getElementById()の記述方法

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

document.getElementById('id名');

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

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

HTML

<p id="id01">「id01」をidとして持つdp要素</p>
<input type="button" value="ok" onclick="showElement();">

JavaScript

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

体重を入力して下さい:<input type="text" id="id01"><br/>
身長をメートルで入力して下さい:<input type="text" id="id02"><br/>
<input type="button" value="計算" onclick="calcBmi();">

JavaScript

//入力された体重と身長から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

<p id="id01">我が輩は猫である。</p>
<input type="button" value="change" onclick="change();">

JavaScript

function change(){
    document.getElementById('id01').innerHTML = "我が輩は犬である。";
}

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

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

function change(){
    var str = document.getElementById('id01').innerHTML;
    str = "我が輩は犬である。";
    document.getElementById('id01').innerHTML = str;
}

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


イベント

2017/12/05(火)
Design Thinking Square