Uncaught TypeError: 〇〇is not a functionを解決したい

Question

前提・実現したいこと

現在javascriptで、クリックしたときに色を変えたり要素を削除する処理を追加しています。
アプリの概要としては、追加したメモを非同期で１回目のクリックで色を変えて、２回目のクリックで削除する形です。

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

jsの二行目のgetElementsByClassNameで該当するもの全てに動作を行いたいのですが、以下のエラーがでます。
memoクラスにIDを付与してgetElementsByIdにするとエラーがでずに処理されるのですが、これは何故なんでしょうか？

Uncaught TypeError: changeCollarButton.addEventListener is not a function

該当のソースコード

window.addEventListener('load', function(){
  const changeCollarButton = document.getElementsByClassName('memo')

  changeCollarButton.addEventListener('click', function(){
      changeCollarButton.setAttribute("style", "background-color:#808080;")
    })
      const element = document.querySelector('section')
      changeCollarButton.addEventListener('click', function(){
          element.remove()
        
    })
})

<div class="memos">
  <% @memos.each do |memo| %>
  <section>
    <div class="memo">
      <div class="memo-item"><%= memo.item %></div>
      <div class="memo-text"><%= memo.text %></div>
    </div>
    </section>
  <% end %>
</div>

試したこと

エラーを調べたところ、タイプミスによることが多いのだそうですが、ID付与時は処理されることからタイプミスとは考えづらいです。（あったらすみません）
foeEachを使うのかなとも思いましたが、別のエラーが大量にでてしまったのでいったんやめました。
console.logでchangeCollarButtonの値が出てきたので、読み込めていることは確認しました。

補足情報（FW/ツールのバージョンなど）

ruby '2.6.5'
gem 'rails', '~> 6.0.0'
gem 'mysql2', '0.5.3'

Answer 1

teratailでも品質の類の質問なのですが、
getElement**”s”**とあるように、取得される情報は特定の要素だけになりません。

Document.getElementsByClassName()

指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。

addEventListenerはあくまで１つ１つの要素に対して指定できますので、[getElements]系の機能で要素を取得した場合は、ループさせて個々の要素に対して付与する必要があります。

Comments

[退会済みユーザー]

addEventListenerはそうゆう意味があるのですね。大変勉強になりました。
ありがとうございます！！

[m.ts10806]

提示したようなリファレンスは確認しておくと良いです。
Railsなどもそうですが、仕様を確認する癖をつけたおいたほうが良いと思います。

[退会済みユーザー]

ご指摘有難うございます。いろいろな情報を読んではいるのですが、やはりこういった噛み砕いて言っていただける場所に頼ってしまいますね…（理解力の問題もありますが）
自分でも考えてはいるのですが、またお会いした際にはご指導お願いします

[m.ts10806]

色々と簡易にテストコード書いてみると理解につながるかと思います。
エラーすら確認しない人も多いので、エラー確認できてる状態なら、もう一歩踏み込めればすぐ身につくと思いますよ。
それに、かみ砕きすぎるとそれは単なる自己解釈になってしまって本質的な理解に繋がらないことも多いです。