getElementByIdとは
- getElementById とは4つの単語から命名されたメソッドです。
- Get
- 読み: ゲット
意味: 取得する - Element
- 読み: エレメント
意味: 要素 - By
- 読み: バイ
意味: 経由して - ID
- 読み: アイディ(アイデンティティー)
意味: 身分証明
DocumentオブジェクトgetElementByIdメソッドの概要
このメソッドは、ドキュメント内にあるid属性値を元に、該当する要素を特定してElementオブジェクトとして返します。
メソッドの引数に指定された文字型のid値をドキュメント内で検索して、該当した要素への参照が可能になるということです。
取得したElementオブジェクトから要素のプロパティにアクセスすることや、要素に対してメソッドを実行することができます。
id属性値はHTML文書中の要素を一意の固有名詞で位置づけるものであるため、単体要素をターゲットとしてアクセスするには簡単であり、最適です。
該当要素がない場合は戻り値はnullとなります。
これはDocumentオブジェクトのメソッドの1つです。 Documentオブジェクトはdocument変数、またはWindowオブジェクトのdocumentプロパティから参照します。
サンプルコードと実行結果
それでは実際にサンプルを使って動作確認を行っていきます。 ここではid属性を持つ2つの要素があり、"idText"のvalue値を"idAnswer"のinnerHTML値に代入するというものです。
サンプルコード: HTML
<body>
<p><input type="text" value="サンプルテキスト" id="idText"></p>
<p><output id="idAnswer">innerHTMLプロパティのテキスト</output></p>
<p><input type="button" value="実行ボタン" onclick="evtClick()"></p>
</body>
サンプルコード: script
<script>
function evtClick(){
document.getElementById("idAnswer").innerHTML = document.getElementById("idText").value;
}
</script>
input要素: id="idText"
output要素: id="idAnswer"
実行ボタン:
クリックするとid="idText"の値がid="idAnswer"のテキストに代入されます。
応用: getElementByIdメソッドを使う本当の理由
javascriptを学び始めた人が、このメソッドの情報を調べることが多いと思いましたので、 このページに1つの参考として書いておきます。
これはgetElementByIdメソッドだけの話ではないのですが、メソッドの引数が文字型であるというところがポイントです。 そもそも、このページのサンプルで実行していることは、getElementByIdというメソッドを使う必要がありません。 次のコードの部分です。
document.getElementById("idAnswer").innerHTML = document.getElementById("idText").value;上記のコードはシンプルに以下のように書いても、問題ありません。
idAnswer.innerHTML = idText.value;では、なぜgetElementById("id名")を使うのかというと、先にも述べたように文字型でidを検索できるというところが便利だからです。 文字型であれば良いわけですから、文字列が入っている変数でもよいわけですし、文字ならプログラムの途中で可変することができます。
実際に動かしてみた方が分かりやすいので、サンプルで検証してみます。
B要素 id="idB1"
B要素 id="idB2"
B要素 id="idB3"
<body>
<b id="idB1">B要素 id="idB1"</b>
<b id="idB2">B要素 id="idB2"</b>
<b id="idB3">B要素 id="idB3"</b>
<button onclick="evtTest()">検証</button>
</body>
<script>
function evtTest(){
for(let i=1; i<4; i=i+1){
document.getElementById("idB"+i).innerHTML = "Rewrite";
}
}
</script>
3つのB要素に次のidを付けました。「idB1」,「idB2」,「idB3」。 この3つのidの違いは末尾の数字のみです。ということはループ処理内でgetElementByIdを使い、引数の末尾だけを変数で変更していけば idのグループみたいな使い方もできます。
この考え方は一例にすぎません。またこのメソッドだけでなく、引数に文字列型が使えるメソッドは使い方しだいで幅広くの処理が できると思います。
document.getElementByIdを使用する上での要点
- このメソッドはid属性をもつ要素を特定してすることができます
- 要素を特定したら、そこからプロパティ値の取得や書き換え、また命令の実行などができます
- 引数には文字型の値を指定します
補足説明
ドキュメントの構成によりますが、初めにページが読み込まれる時のスクリプトによるコンテンツの書き出しは、 document.writeを使い、 ページの表示完了後に途中で値の読込みや更新をする場合にdocument.getElementByIdを使うことになると思います。
このメソッドには類似した機能をもつメソッドがいくつか存在します。興味がある方は関連リンクを参照してください。