javascriptのonclickメソッドでうまく発火しなかった

javascriptのonclickメソッドで少し詰まったところがあるので、自分のメモとして残しておきます。

問題

javascriptでonclickメソッドを使おうとした際に、idではうまく発火するがclassだとうまく発火されなかった

idでonclickメソッドを発火させる場合

document.getElementById('hoge').onclick = function() {
  console.log("クリック")
}

これは普通にIDの要素がクリックされたら発火します。

classでonclickを発火させる場合（失敗）

document.getElementsByClassName('fuga').onclick = function() {
  console.log("クリック")
}

これでは発火されず、コンソール上にも何も表示されません。
classはidと違い一意でなく1ページ上に同じ名前のものを複数設定できるため、getElementsByClassNameはHTMLCollection（配列型のオブジェクト）となって返ってきてしまうのです。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

解決策

classでonclickを発火させる場合（成功）

document.getElementsByClassName('fuga')[0].onclick = function() {
  console.log("クリック")
}

そのため、getElementsByClassName('fuga')[0]とするように添字を設定する必要があります。

まとめ

そもそもgetElementByIdではElementで単数形になっていて、getElementsByClassNameではElementsで複数形となっているのでよくみれば当たり前でしたね。

わざわざ記事にするほどの内容でもないですが、自分の備忘録として残しておきました。