classList プロパティ

プロパティ classList は要素の CSS クラスの擬似配列を含み、また要素のクラスの追加や削除、要素のクラスの中に特定のクラスが存在するかどうかの確認を可能にします。

これは、class 属性の話で、その中には複数のクラスをスペースで区切って記述することができます。例えば www ggg zzz のようになります。classList を使用すると、例えば ggg クラスを削除することができ、他のクラスには影響を与えません。

構文

要素.classList;

要素のクラスの数を確認しましょう：

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

コード実行の結果：

3

要素のクラスを順番に出力しましょう：

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
	console.log(className);
}

コード実行の結果：

'www'
'ggg'
'zzz'