【JavaScript】getElementByIdとgetElementsByTagNameの違い

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

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

・getElementById()
・getElementsByTagName()

Contents

getElementById()メソッド

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

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

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

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

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

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

これは、

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

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

というJavaScriptです。

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

h1_tag[0]

という部分は、

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

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

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