特定のクラスを持つ要素にmouseoverすることでスタイル変更を発火させたい

Question

前提・実現したいこと

特定のクラスを持つ要素にマウスカーソルが乗った時、
その要素のCSSが変化するようなjavascriptを書きたいです。

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

あらかじめ要素にIDを付与した場合うまくいきますが、
CLASSを付与した場合は何も起こりません。

<div class="elem">マウスポインターを乗せると色が変わります</div>

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementsByClassName('elem')

 //マウスポインターが乗ったタイミングで背景色を変更
 elem.addEventListener('mouseover', function() {
  this.style.backgroundColor = 'Yellow'
 }, false)

 //マウスポインターが外れたタイミングで背景色を戻す
 elem.addEventListener('mouseout', function() {
  this.style.backgroundColor = ''
 }, false)
}, false)

試したこと

下記だとうまくいきます。

<div id="elem">マウスポインターを乗せると色が変わります</div>

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementById('elem')

 //マウスポインターが乗ったタイミングで背景色を変更
 elem.addEventListener('mouseover', function() {
  this.style.backgroundColor = 'Yellow'
 }, false)

 //マウスポインターが外れたタイミングで背景色を戻す
 elem.addEventListener('mouseout', function() {
  this.style.backgroundColor = ''
 }, false)
}, false)

トリガーとなる要素に指定されているのがIDだとうまくいくのに、クラスだとうまくいかない状況です。
document.getElementsByClassNameという書き方はよくないのでしょうか？

知恵を貸していただきたいです。

試したこと追記

getElementsByClassNameは配列ライクなオブジェクトを返します。

という回答をほかの質問で見ました。（https://teratail.com/questions/87978）

ということは、[0]をどこかに書かなければいけないのでは？
と思いコードを下記のようにしましたが、何も起こりませんでした。

document.addEventListener('DOMContentLoaded', function() {
 let elem = document.getElementsByClassName('elem')

 //マウスポインターが乗ったタイミングで背景色を変更
 elem[0].addEventListener('mouseover', function() {
  this.style.backgroundColor = 'Yellow'
 }, false)

 //マウスポインターが外れたタイミングで背景色を戻す
 elem[0].addEventListener('mouseout', function() {
  this.style.backgroundColor = ''
 }, false)
}, false)

elem[0].addEventListener
もダメ見たいです。
[0]を書くべき場所が他にあるのでしょうか

Comments

[hatena19]

「試したこと追記」コードでちゃんと動作しました。
https://codepen.io/hatena19/pen/bGBKREg
提示していない部分のコードに問題があるのでは。

[bokupiroki]

手元のコードを見直したら、
「 let elem = document.getElementByClassName('elem')」
になっていたので、getElementsと複数形に修正したら動きました。

ありがとうございます。

Answer 1

まずは取れているelemをconsole.log()だとかで中身を見てみるといいかもしれません。どんな状態になっているか分かると思います。
空なのか配列なのか、それとも意図したものが取れていないのかなどが分かった後に、どのように指定のものを取るべきか分かるかもしれません。

querySelector()関数なども試してみてもいいかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
引数はクラス名の場合はドットから始まるcssセレクタなので注意してください。

Comments

[bokupiroki]

console.logで確認すると何も取れませんでした。
ということは、そもそも取得できていないということが分かりました！

[bokupiroki]

hatena19さんのがコメントでおっしゃる通り、ちゃんと試したこと追記のコードで動きました。
手元のコードが間違ってました。

「 let elem = document.getElementByClassName('elem')」
になっていたので、getElementsと複数形に修正したら動きました。

yamotukiさんの回答にあるように、今後はconsole.logで変数の中身を確認します。
お騒がせしました。