Supongamos que tienes un elemento en tu página como este:

<div class="rojo">

que quieres localizar y cambiar la clase que tiene aplicada para que pase a ser «verde», o sea, equivalente a esto:

<div class="verde">

Nota: Dejemos de lado el hecho de que el nombre de la clase no es el más apropiado pues no es reutilizable y está atado al aspecto físico concreto. Este no es un artículo de buenas prácticas de CSS.

Para realizar ese cambio de clase, la gente que utiliza jQuery está muy acostumbrada a escribir código como este:

$('.rojo').removeClass("rojo").addClass("verde");

Este fragmento es muy sencillo y lo que hace es, primero localizar todos los elementos que tienen aplicada la clase «rojo», a éstos se la retira con removeClass y luego le añade la clase «verde» usando el método addClass de jQuery.

La verdad es que es muy fácil, pero ¿realmente merece la pena añadir una dependencia a jQuery (y todo su peso y procesamiento) a nuestra página para hacer algo tan sencillo?

La respuesta es que, desde luego solo para este tipo de cosas, no: no merece la pena.

Los navegadores actuales son capaces de hacer exactamente lo mismo con JavaScript puro sin necesidad de recurrir a bibliotecas externas, y además es casi igual de sencillo conseguirlo.

Vamos a ver cómo podemos lograr lo mismo sin jQuery, solo con lo que nos ofrece el navegador…

SIGUE LEYENDO para aprender:

• Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
• Cómo quitar clases
• Cómo añadir clases
• Cómo alternar clases
• Cómo comprobar si un elemento tiene aplicada o no una determinada clase
• Cómo dar soporte a navegadores muy antiguos