Esta API de HTML5 es sin duda una de las mas útiles. Este objeto nos devuelve una lista con todas las clases CSS del documento HTML para que podamos trabajar con ellas, o dicho de otro modo, con classList vamos a poder añadir, quitar o incluso comprobar si existe una clase CSS.
Métodos que nos ofrece classList
Lo primero, debemos seleccionar el elemento:
var element = documentogetElementById('idOfElement');
var element = $('#ifOdelement'); //jQueryLuego, tenemos estas alternativas para trabajar con nuestro elemento:
Añadir una clase:
element.classList.add('someClass');Quitar una clase:
element.classList.remove('someClass');Alternar una clase:
element.classList.toggle('someClass');Comprobar si tiene una clase dada:
element.classList.contains('someClass');Seleccionar una clase en función de su posición:
Quitar una clase:
element.classList.item(0); //Esto selecciona la primera claseObtener el número total de clases que tiene:
element.classList.length;Compatibilidad
Todos los navegadores actuales, excepto Internet Explorer, que la implementara en su versión 10, por lo que, si queremos seguir dando soporte a versiones anteriores de este navegador, tendremos que recurrir a Jquery o cualquier otra librería que cumpla con este propósito.