Propiedad classList

La propiedad classList contiene un pseudoarray de clases CSS del elemento, y también permite agregar y eliminar clases del elemento, verificar la presencia de una clase específica entre las clases del elemento.

Se trata del atributo class, dentro del cual se pueden escribir varias clases separadas por espacios, por ejemplo www ggg zzz. Con classList se puede eliminar, por ejemplo, la clase ggg, sin afectar las demás clases.

Sintaxis

javascriptelemento.classList;

Ejemplo . Cantidad de clases

Averigüemos la cantidad de clases del elemento:

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

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

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

Resultado de la ejecución del código:

javascript3

Ejemplo . Iteramos sobre las clases

Mostremos las clases del elemento una por una:

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 de la ejecución del código:

javascript'www'
'ggg'
'zzz'

Véase también