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

javascriptelemento.classList;

Exemplo . Número de classes

Vamos descobrir o número de classes do elemento:

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

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

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

Resultado da execução do código:

javascript3

Exemplo . Iterando sobre as classes

Vamos exibir as classes do elemento uma por uma:

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

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

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

Resultado da execução do código:

javascript'www'
'ggg'
'zzz'

Veja também