Element.classList
Element.classList は読み取り専用のプロパティで、生きた DOMTokenList コレクションでその要素の class 属性を返します。これを使用してクラスリストを操作することができます。
classList を使用することは、 element.className から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な代替手段になります。
構文
const elementClasses = elementNodeReference.classList;
返値
DOMTokenList で、その要素の class 属性を返します。 class 属性が設定されていない場合や空の場合は、空の DOMTokenList を返します。すなわち、 DOMTokenList の length プロパティが 0 になります。
DOMTokenList 自体は読み取り専用ですが、 add[] や remove[] を用いてオブジェクトを変更することはできます。
例
const div = document.createElement['div'];
div.className = 'foo';
// 最初の状態:
console.log[div.outerHTML];
// classList API を用いてクラスを除去、追加
div.classList.remove["foo"];
div.classList.add["anotherclass"];
//
console.log[div.outerHTML];
// visible が設定されていれば除去し、なければ追加
div.classList.toggle["visible"];
// i が 10 未満であるかどうかの条件によって visible を追加または除去
div.classList.toggle["visible", i