スライドショースライドショー

【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プログラムを目指しましょう。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説