※プログラミング学習中の私がアップロードしてます。理解が浅いです。
この記事は厳密な仕様に関するものではなく、考え方理解のまとめとして受け取ってください。
.classList
classListは、要素のクラス属性のリストを取得して返します。 classListは、element.className経由で空白区切りのクラス名の文字列を取得する代替手段として、 要素のクラス名のリストにアクセスするのに便利です。 これは下記のメソッドを含みます。
| add | 要素のクラスのリストに、クラスを追加します |
|---|---|
| remove | 要素のクラスのリストから、クラスを削除します |
| toggle | 要素のクラスのリスト内のクラスの有無を切り替えます。 後述する2つ目の引数についてを参照してください |
| contains | 指定したクラスが、要素のクラスのリストに含まれているかを確認します。 |
文法
var elementClasses = elementNodeReference.classList;
elementClassesには、 elementNodeReferenceのクラス属性を表すDOMTokenListが格納されます。 もしクラス属性が設定されていない、または空の場合、elementClasses.lengthは0を返します。element.classListそれ自身は読み取り専用ですが、add()とremove()メソッドを使用して、 変更することが可能です。toggle()メソッドは真偽値によって、 強制的にクラス名を追加または削除する任意の2つ目の引数を持ちます。 例えば、クラスを削除(存在するしないに関わらず)するために、 element.classList.toggle('classToBeRemoved', false);を呼び出し、 クラスを追加(存在するしないに関わらず)するためにelement.classList.toggle('classToBeAdded', true);を呼び出します。
例
// divはclass="foo bar"を持つ<div>要素オブジェクトへの参照です。
div.classList.remove("foo");
div.classList.add("anotherclass");
// もしvisibleがあれば削除され、そうでなければ追加されます。
div.classList.toggle("visible");
alert(div.classList.contains("foo"));
div.classList.add("foo","bar"); //複数のクラスを追加
js STUDIO
https://js.studio-kingdom.com/javascript/element/class_list