【JavaScript入門】getElementByIdを完全理解する3つのコツ！

2024年3月29日

Kotono

みなさんこんにちは！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タグ内の文字列が変更されるという仕組みになっています。

以下の画像をご覧ください。コードを実行すると以下のように表示されます。

2017-07-05 (12)

ボタンをクリックすると、文字が変更されたのが分かりますね！

2017-07-05 (13)

クリック前は「こんにちは！」と表示されていたものが、クリック後は「こんばんは！」に変わりました。

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プロパティは、ボタン上に表示されている文字列のことを指します。

以下の画像をご覧ください。

コードを実行すると以下のようなボタンが表示されます。

2017-07-05 (14)

ボタンをクリックすると、ボタン上の文字が変更されたのが分かりますね！

2017-07-05 (15)

クリック前は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;と設定しました。

以下の画像をご覧ください。コードを実行すると、以下のような文字とボタンが表示されます。

2017-07-05 (16)