Cómo manipular clases sin jQuery utilizando la API classList de HTML5

Programación

Como desarrollador front-end, a menudo necesita cambiar las reglas de CSS en función de cómo un usuario interactúa con los elementos de una página.

En el pasado, confié en jQuery para manejar este tipo de manipulaciones DOM por mí. Pero en algunos casos, no tiene sentido importar toda la biblioteca jQuery, solo para poder realizar una manipulación DOM básica.

Afortunadamente, HTML5 ofrece una forma de hacer esto de forma nativa, sin la necesidad de jQuery.

Cómo descubrí el método classList de HTML5

Hace unos días, estaba leyendo un código. Noté que un proyecto incluía jQuery como una dependencia, solo para que pudieran agregar y eliminar clases cuando el usuario hacía clic en un botón de la página. El código de interacción completo tenía solo 11 líneas de código.

Pensé que era extraño que lo estuvieran haciendo de esta manera. Era el equivalente a usar una bazuca (jQuery) para matar un mosquito (agregar y eliminar clases con un clic).

Se me ocurrió que probablemente había hecho cosas similares en mis proyectos de codificación anteriores. Así que decidí intentar replicar la misma funcionalidad usando JavaScript simple y ver qué puedo aprender de eso.

Una búsqueda rápida mostró varias opciones para hacer esto en JavaScript simple. Opté por el método classList porque es fácil de entender y la compatibilidad con varios navegadores es bastante buena.

Tenga en cuenta que si necesita admitir versiones de Internet Explorer anteriores a IE 11, es posible que deba buscar un método alternativo o utilizar un polyfill.

Si depende totalmente del uso de jQuery para el manejo de DOM, este es un gran lugar para comenzar a obtener cierta independencia de jQuery.

¿Qué es la API classList?

La API de HTML5 classList proporciona una manera de tomar todas las clases asociadas con un elemento para que pueda usar JavaScript para modificarlas.

El uso de la propiedad DOM de classList en un elemento devolverá un DOMTokenList . Contiene todas las clases aplicadas a un elemento y la propiedad length , que significa el número total de clases en ese elemento.

Echale un vistazo a éste ejemplo:

//JavaScriptvar about = document.getElementById("about"); console.log(about.classList); //logs { 0: "content-wrapper" 1: "about" 2: "animated" length: 3 value: "content-wrapper about animated" }

Puede probar lo anterior en su navegador para verlo en acción.

Obtener las clases de un elemento está muy bien, pero no es tan útil por sí solo. Necesitamos una forma de administrar y actualizar esas clases. La propiedad classList proporciona algunos métodos que hacen precisamente eso:

  • add () : agrega clases especificadas
  • remove () : elimina las clases especificadas
  • contiene () : comprueba si la clase especificada existe en el elemento
  • toggle () : alterna la clase especificada
  • index () : devuelve la clase en una posición especificada en la lista
  • longitud : devuelve el número de clases

Echemos un vistazo a cada uno de ellos.

Agregar clases

Agregar una clase a un elemento es sencillo. Simplemente aplique el nombre de la clase como argumento al método add () . Tenga en cuenta que si el nombre de la clase ya existe en el elemento, no se volverá a agregar.

//JavaScriptdocument.getElementById("headline").classList.add("title"); //gives

Para agregar varias clases, separe cada clase con una coma:

//JavaScriptdocument.getElementById("headline").classList.add("title", "headline"); //gives

Eliminando clases

Para eliminar una clase, todo lo que necesita hacer es pasar el nombre de la clase como argumento al método remove () . Si el nombre de la clase aún no existe en classList , se genera un error.

//JavaScriptdocument.getElementById("header").classList.remove("masthead"); //gives

Para eliminar varias clases, separe cada clase con una coma:

//JavaScriptdocument.getElementById("header").classList.remove("masthead", "headline"); //gives

Comprueba si existe una clase

Usando el método contains () , podemos verificar si una clase específica está presente en la classList de un elemento y realizar operaciones basadas en el valor de retorno.

Por ejemplo:

Click Me
//JavaScriptvar button = document.getElementById("btn"); if (button.classList.contains("hidden")) { //do something } else { //do something else}

Alternar clases

Agregar o eliminar una clase en función de la acción del usuario es algo común. Esto era exactamente lo que quería lograr con classList.

Puede alternar entre agregar y eliminar usando el método toggle () .

Esto es lo que finalmente hice:

//JavaScriptvar page = document.getElementById("page"); var menu = document.getElementById("menu"); var nav = document.getElementById("navigation"); 
function hasClass() { page.classList.toggle("open"); menu.classList.toggle("active"); nav.classList.toggle("hidden"); }

Consulta el número de clases

To find out how many classes are applied to an element, use the length property:

//JavaScriptdocument.getElementById("navbar").classList.length; // 2

Wrapping up

As you can see, the classList API is easy to use. I encourage you to begin exploring its capabilities in your own applications.

Also, leave a comment if you have any questions, or reach out to me on Twitter. For more articles like this one, check out my blog. Thanks for reading!