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

みなさんこんにちは!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)

ボタンをクリックすると、文字の色と大きさが変わりました!

2017-07-05 (17)

このように、他にも一般的なstyleであれば変更することが可能です。

まとめ

今回はgetElementByIdメソッドについて学びました。

様々なケースで活用できるので、JavaScriptを勉強するにあたって避けては通れないテクニックの一つです。一度習得してしまえば基本的な使用方法は同じなので、getElementByIdメソッドをマスターしておいて損はありません。

ぜひ、getElementByIdメソッドをどんどん活用して、質の高いJavaScriptプログラムを目指しましょう。

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次