classListとは
～Crebitテキストより～
classListとは、class属性の一覧を取得・操作できるプロパティのことです。
このプロパティを使うことで、要素に新しいclassを追加したり、不要になったclassを削除したりすることが簡単にできるようになります。
通常、class属性は文字列として扱われますが、classListを使うことでクラスを個別に管理できるようになります。
ポイントは以下の3点です。
1. classList は「要素に設定されているクラス名の一覧」を返します。
2. 配列のようにインデックスで取り出せるし、length で数も確認できます。
3. add() でclassを追加、remove() でclassを削除できます。
そのほかにも便利なメソッドがあります。
・toggle()→classを追加/削除して切り替える
・contains()→指定したclassがあるか確認する
・replace()→classを別のclassに置き換える
どんな場面で使うの？
classListは、JavaScriptで要素の見た目や状態を切り替えるときによく使われます。
例えば次のような場面です。
・ボタンをクリックしたときに メニューを開閉する
・クリックした要素を 選択状態（active）にする
・表示 / 非表示を切り替える
・ダークモードなど 画面デザインを切り替える
このように、classを付けたり外したりすることで、CSSの見た目を切り替える処理に使われることが多いです。
まとめ
・classListは、class属性の一覧を取得・操作できるプロパティ
・配列のようにインデックスで取り出せて、length で数もわかる
・add() →classを追加、remove()→classを削除
学習した時に、配列の追加のpushと削除のpopと用語が異なるため、少しややこしいと感じました。
混乱しないように気をつけながら覚えていきたいと思います。