みなさんこんにちは！Kotonoです。
今回はJavaScriptプログラムで頻繫に見かける、getElementByIdメソッドについてざっくりと解説していきたいと思います。getElementByIdを使うと、HTML要素の取得を簡単に行う事が出来てとても便利です。
この記事では
- getElementByIdとは
- 要素の取得方法
- getElementByIdの注意点
- getElementByIdの活用事例
などを、サンプルコードを交えながら解説していきます。
getElementByIdとは？
みなさんはgetElementByIdを使用していますか？そもそも、getElementByIdが何か知っていますか？
getElementByIdは、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。
引数としてIDであるStringオブジェクトを要し、戻り値は取得した要素です。任意の要素を抽出し、その内容を変更したい場合など、様々なシチュエーションで活躍する関数です。
基本的にIDはドキュメント内で重複してはならないので、getElementByIdによって取得される要素は一つです。
基本的な書き方について
では、実際に使用してみましょう！
以下のコードをご覧ください。
<html>
<body>
<p id="myid">Hello world!</p>
<script>
console.log(document.getElementById("myid"));
</script>
</body>
</html>
出力結果
<p id="myid">Hello world!</p>
このサンプルコードでは、pタグをIDで抽出してJavaScriptコンソールに表示させてみました。
pタグのID名がmyidなので、getElementByIdの引数として設定されています。
要素を取得しよう
では、実際にHTML要素を取得してみましょう。
<html>
<body>
<p id="myid">Hello world!</p>
<script>
console.log(document.getElementById("myid").textContent);
</script>
</body>
</html>
上記のサンプルコードでは、pタグを取得してその中身である文字列をtextContentプロパティを使用し、JavaScriptコンソールに表示させてみました。
出力結果は以下の通りです。
Hello world!
変数でIDを指定しよう
今までのサンプルコードでは、getElementByIdの引数にはID名の文字列を直接指定していました。
しかし、getElementByIdの引数は変数でも代替出来るんです。
以下のコードをご覧ください。
<html> <body> <p id="myid">Hello world!</p> <script> var id = "myid"; console.log(document.getElementById(id)); </script> </body> </html>
実行結果
<p id="myid">Hello world!</p>
上記のサンプルコードでは、変数「id」にpタグのID名であるmyidが格納されています。
そこで、この変数をgetElementByIdの引数に指定すれば、出力結果にはpタグ要素が表示されるというわけです。
getElementByIdの注意点！
getElementByIdを使用するにあたって、よくトラブルになりがちなケースを二つご紹介したいと思います。
ここでは、戻り値がnullになるケースと、同じIDがドキュメント内に重複しているケースについての注意点を解説したいと思います。
戻り値の「null」について
指定したID名がHTMLドキュメント内で見つからない場合、getElementByIdの戻り値としてnullが返ります。
以下のコードをご覧ください。
<html>
<body>
<p id="myid">Hello world!</p>
<script>
console.log(document.getElementById("hello"));
</script>
</body>
</html>
上記のサンプルコードは、pタグのIDがmyIdであるのにも関わらず、getElementByIdの引数にはhelloと設定してしまった例です。
getElementByIdは、helloというIDを持つ要素がドキュメント内に見当たらないため、戻り値としてnullを返すわけです。
よって、出力結果は以下の通りです。
null
IDが複数ある場合について
反対に、同じIDが同じドキュメント内に重複してしまった場合は、初回に合致した要素しか取得されません。
以下のコードをご覧ください。
<html>
<body>
<p id="myid">こんにちは！</p>
<p id="myid">こんばんは！</p>
<script>
console.log(document.getElementById("myid"));
</script>
</body>
</html>
上記コードには、二つのpタグが存在しており、二つとも同じIDを保有しています。
その為、getElementByIdがmyidをID名とする要素を探し出すと、一番目にマッチした要素のみ戻り値として返します。
出力結果は以下の通りです。
<p id="myid">こんにちは！</p>
そもそもIDは、一つのHTMLに固有のものなので重複しないように注意を払いましょう。
getElementByIdの活用事例！
getElementByIdは様々なシチュエーションに役立つメソッドなので、マスターしておいて損はありません。
ここでは、いくつかのケースをご紹介したいと思います。
innerHTMLの例
innerHTMLというプロパティを使用すれば、要素の中身を変更する事が出来ます。
以下のコードをご覧ください。
<html>
<body>
<p id="myid">こんにちは！</p>
<input type="button" value="Click" onclick="myfunc()">
<script>
var myfunc = function(){
var myp = document.getElementById("myid");
myp.innerHTML = "こんばんは！";
}
</script>
</body>
</html>
上記コードでは、innerHTMLプロパティを使用してpタグの中身を変更してみました。Clickボタンをクリックすると、pタグ内の文字列が変更されるという仕組みになっています。
以下の画像をご覧ください。コードを実行すると以下のように表示されます。
ボタンをクリックすると、文字が変更されたのが分かりますね！
クリック前は「こんにちは！」と表示されていたものが、クリック後は「こんばんは！」に変わりました。
valueの例
HTMLのフォームタグのvalue属性の値を取得、変更したい場合などにも、getElementByIdを使用することができます。
valueプロパティを使うことで、value属性の値を取得、変更できます。
以下のコードをご覧ください。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" id="myid" value="Click">
<script>
console.log(document.getElementById("myid").value);
</script>
</body>
</html>
上記コードではボタンに表示されている文字を取得しています。
出力結果は以下の通りです。
Click
onClickの例
getElementByIdで抽出した要素に、イベントハンドラーを結びつけることも出来ます。
例えば、ボタン要素を取得してクリックすると、指定した関数が発動される仕組みも簡単に設定できます。
以下のコードをご覧ください。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" id="myid" value="Click">
<script>
var mybutton = document.getElementById("myid");
var myfunc = function(){
mybutton.value = "Hello world!";
}
mybutton.onclick = myfunc;
</script>
</body>
</html>
上記コードでは、Clickボタンをクリックすると、ボタンに表示されている文字が変更される仕組みになっています。
getElementByIdで抽出したボタン要素をmybutton変数に格納し、その変数のonclickプロパティの値としてmyfunc関数を設定します。
myfunc関数は、ボタン要素のvalueプロパティを変更します。先ほど説明しましたが、valueプロパティは、ボタン上に表示されている文字列のことを指します。
以下の画像をご覧ください。
コードを実行すると以下のようなボタンが表示されます。
ボタンをクリックすると、ボタン上の文字が変更されたのが分かりますね！
クリック前はClickと表示しているボタンが、クリック後はHello world!に変わりました。
styleの例
HTML内の文字色を変更したい場合などにも、getElementByIdを使用することが出来ます。
styleプロパティの値を設定することで、簡単に色やサイズを変えることができます。
以下のコードをご覧ください。
<html>
<body>
<p id = "myid">Hello world!</p>
<input type="button" id="myid" value="Click" onclick="myfunc()">
<script>
var myfunc = function(){
var myp = document.getElementById("myid");
myp.style = "color:red;font-size:48px;";
}
</script>
</body>
</html>
上記のサンプルコードでは、Clickボタンをクリックすると、pタグ内の文字列の色と大きさが変更される仕組みになっています。
getElementByIdで抽出した要素mypのstyleプロパティの値を設定します。今回は、文字を赤色＆大サイズに変更したので、color:red;font-size:48px;と設定しました。
以下の画像をご覧ください。コードを実行すると、以下のような文字とボタンが表示されます。
ボタンをクリックすると、文字の色と大きさが変わりました！
このように、他にも一般的なstyleであれば変更することが可能です。
まとめ
今回はgetElementByIdメソッドについて学びました。
様々なケースで活用できるので、JavaScriptを勉強するにあたって避けては通れないテクニックの一つです。一度習得してしまえば基本的な使用方法は同じなので、getElementByIdメソッドをマスターしておいて損はありません。
ぜひ、getElementByIdメソッドをどんどん活用して、質の高いJavaScriptプログラムを目指しましょう。
