なぜgetElementsByTagNameでの要素の取得に失敗してしまうのか

Question

getElementsByTagNameでhtml要素を取得しようと試みた

　JavaScriptの学習の一環で簡単なゲームを作ろうと考えていました。p要素をそれぞれ、getElementById、getElementsByTagNameでhtmlの要素を取得しようとしたところ、getElementByIdでの取得は問題なく進んでいるようであるにも関わらず、getElementsByTagNameで取得した場合は下記のようなUncaught TypeErrorが出てしまい、要素の取得に失敗していることがわかりました。

まず初めにスペルミスを疑いましたが、どの文献を参考にしてもスペルミスは発見できず、原因はスペルミスではないという判断をしました。
これだけの短いコードでエラーを出しているということは、そもそもgetElementsByTagNameの理解の仕方を間違えているのだろうと考え、ありとあらゆるネットと手持ちの参考書を参照しましたが、なぜこの書き方ではエラーが出てしまうのかの解決に至らなかったため、質問させていただきました。

発生している問題・エラーメッセージ

Uncaught TypeError: b.addEventListener is not a function
at window.onload

該当のソースコード

--略--
<p id="test">Test</p>
--略--

window.onload = function() {
 var a = document.getElementById('test');
 var b = document.getElementsByTagName('p');

 function hello() {
   alert('Hello');
 }

 a.addEventListener('click', hello, false);
 b.addEventListener('click', hello, false);//ここでエラーが出ている
}

Answer 1

document.getElementById('test') の返り値は単体の要素になりますが、document.getElementsByTagName('p')の返り値は、メソッド名が複数形になっていることからもわかる通り複数の要素を含むコレクション (HTMLCollection) です。

この HTMLCollection にはaddEventListener が定義されていないため、ご質問のエラーになっているものと思われます。

個々の要素を取り出すことで目的の処理が実現できると思います。

var b = document.getElementsByTagName('div')
for (var n of b) {
  n.addEventListener('click', () => alert('click'))
}

Comments

[kentaka]

getElementByTagNameで取得すると、取得した要素は複数あるものという判定になり、そのため、たとえ取得した要素が一つしかなくても、複数あるものの中から一つ一つ取り出して処理させるというイメージなんですかね。

ご回答いただきありがとうございました。