Propriedade classList

A propriedade classList contém uma pseudomatriz de classes CSS do elemento, e também permite adicionar e remover classes do elemento, verificar a presença de uma classe específica entre as classes do elemento.

Trata-se do atributo class, dentro do qual é possível escrever várias classes separadas por espaço, por exemplo www ggg zzz. Usando classList é possível remover, por exemplo, a classe ggg, sem afetar as demais classes.

Sintaxe

elemento.classList;

Exemplo . Número de classes

Vamos descobrir o número de classes do elemento:

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

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

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

Resultado da execução do código:

3

Exemplo . Iterando sobre as classes

Vamos exibir as classes do elemento uma por uma:

<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);
}

Resultado da execução do código:

'www'
'ggg'
'zzz'

Veja também

método classList.add,
que adiciona uma classe especificada
método classList.remove,
que remove uma classe especificada
método classList.contains,
que verifica uma classe especificada
método classList.toggle,
que alterna uma classe especificada