classList.add のエラーが取れないです

Question

classList.add/classList.removeを使って、クラスを追加・削除したのですが、どうしてもエラーがでてしまい、原因がわかりません。

エラーメッセージ
Uncaught TypeError: Cannot read property 'add' of undefined
Uncaught TypeError: Cannot read property 'remove' of undefined

<div class="mvOverlay"></div>

const mvOl = document.getElementsByClassName('mvOverlay');

var scrollTopMv = document.documentElement.scrollTop || document.body.scrollTop;


  if (scrollTopMv >100){

    mvOl.classList.add('show');

  }else{
     mvOl.classList.remove('show');
  }
}

Answer 1

HTMLのclass属性って、複数の要素につけることができる前提なので、
document.getElementsByClassName()の結果は、配列のようなものになっているんです。
たとえその要素が１つしかなかったとしてもです。

たとえばこんな感じです。[ 要素1, 要素2, 要素3 ]
この配列のようなものは HTMLCollection と呼ばれています。

となると、add()やremove()のメソッドが使えるのは、要素1や要素2であって、
HTMLCollectionには使えないのです。

なので、配列とおなじように、複数の要素それぞれに同じことがしたいなら for を使って、ひとつひとつの要素に対してadd()やremove()をする必要があります。
たとえそのクラスを持ってる要素が１つしかなかったとしても mvOl は HTMLCollection なので、
mvOl[0]というふうに、中身の要素を指定してあげないといけないのです。

Comments

[tetoro]

回答ありがとうございました！
そういうことだったんですね。無事要素を取得できました！ありがとうございました。

Answer 2

getElementsByClassName()が返すのは、HTMLCollectionであってElementではないので、mvOl.classListはundefinedです。
クラスが 'test' である最初の要素を取得する | Document.getElementsByClassName() - Web API | MDN

解決方法は、mvOl[0]のように添え字をつけてElementを取り出すことです。

Comments

[tetoro]

回答ありがとうございました！
そういうことだったんですね。無事要素を取得できました！ありがとうございました。

Answer 3

わざわざクラスで指定しているところを見ると複数設定されているのですよね？

であればループして各要素に対して処理をしてください