【JavaScript】getElementByIdとgetElementsByTagNameの違い

JavaScript初心者が注意すべき、getElementById()とgetElementsByTagName()との違い

昨日からJavaScriptの基本を学習し始めました。書籍を買ったり、ネットの学習サービスなどは使わず、ネットで調べながら少しずつやっています。

昨日から第一歩を踏み出したわけですが、初日から躓いたことがあったのでそれについて書いておこうと思います。それは、次の2つのメソッドの違いです。

・getElementById()
・getElementsByTagName()

getElementById()メソッド

getElementById()は、html内のid要素に応じてその情報を取得します。htmlでidを使う場合は、「固有の情報」を示すために使うので、基本的にはhtml文書内に、同じ名前のidは1つしか存在しません。個性重視という感じですね。

なので、このメソッドを実行すると返ってくる情報は「1つ」です。

getElementsByTagName()メソッド

一方、getElementsByTagName()メソッドは、htmlタグに応じてその情報を取得するメソッドですが、「Elements」というように複数形の「s」がメソッド名につけられいることからわかるように、複数の要素を対象としたメソッドです。

たとえは、htmlタグの<h3>というタグは同じhtml文書内で複数使われることがありますので、それら複数の<h3>タグの情報をまとめて取得するメソッドということですね。

したがって、このメソッドで取得される情報はHTMLCollectionという「配列っぽい」ものとして扱われることになります。メソッドの実行結果が「配列っぽい」ものとして返ってくるわけです。配列っぽいものの中身が返ってくるのではなく、「配列っぽいものそれ自体」が返ってくるわけです。

具体例として次の例を見てください。

例:ボタンを押すとH1タグの文字と色情報を取得し、H1タグの色を変えるJavaScript

See the Pen [JavaScript] Change Color of HTML Tag by 1978works (@1978works) on CodePen.

これは、

・Get~というボタンを押す→html文書内のh1タグの文字情報と、色の情報がポップアップウインドウで表示

・Change~というボタンを押す→「H1 Tag」という文字の色が変わる(黄色→ピンク、ピンク→黄色)

というJavaScriptです。

このJavaScriptのソースでは、getElementsByTagName()を使っています。これは上述のように「配列っぽい」ものが返ってくるので、

h1_tag[0]

という部分は、

・h1_tagは、「配列っぽい」ものそれ自身
・h1_tag[0]は、その「配列っぽい」ものを構成する要素のうち、最初の(1番目)の要素


をそれぞれ意味しています。「配列っぽい」ので、[0]とか[1]とかを加えることで何番目の要素を取り出したいのかを指定できるということですね。

こういったことを知らなかったため、最初「あれ?なんでgetElementByIdではうまくいくのに、getElementsByTagNameでは動作しないのだろう」とずっと悩みました。

やっぱりプログラミングは独学だとわかりにくいですよね、そこでスクールや動画による解説を利用しましょう!

Tech Academy

厚切りジェイソンのCMでおなじみのプログラミングスクール。自宅でオンライン受講OK。現役のプロが一人一人に専属メンターになってくれ、質問すればすぐに回答。転職保証あり

Udemy

世界最大級のオンライン学習動画サービス。AI・データサイエンスなど最先端のプログラミング講座からビジネススキル講座まで10万以上の講座から選び放題。講師に掲示板から直接に質問もできる。