¿Cómo averiguar si un elemento tiene una clase específica en JavaScript?

¿Cómo verificar la existencia de una clase en un elemento HTML mediante JavaScript?

Cuando trabajamos con JavaScript y el DOM, a menudo nos encontramos con la necesidad de verificar si un determinado elemento HTML tiene asignada una clase específica. Esta operación es fundamental para manipular el comportamiento y el estilo de los elementos de nuestra página de manera dinámica. En este artículo, te mostraré cómo utilizar la herramienta ‘classList’ disponible en JavaScript para realizar esta tarea de forma efectiva.

Introducción a la Propiedad classList

La propiedad ‘classList’ es una lista de solo lectura de las clases de un elemento, accesible a través de JavaScript. Provee varios métodos útiles para operar con las clases de un elemento HTML de una forma sencilla y legible.

Obtención de un Elemento y su Lista de Clases

Comenzamos por obtener nuestro elemento del DOM utilizando ‘document.getElementById’, lo cual nos devuelve una referencia al elemento con el identificador proporcionado. A continuación, accedemos a su ‘classList’ para inspeccionarlo.

var item = document.getElementById(‘Nombre’);document.write(‘<br>’, item.classList);

Este código imprimirá en pantalla todas las clases que el elemento con id ‘Nombre’ posee, separadas por espacios, tal como se definen en el HTML del elemento.

Comprobando la Existencia de una Clase

Para verificar si nuestro elemento contiene una clase particular, usaremos el método ‘contains’ de classList.

var item = document.getElementById(‘Nombre’);var hasClase2 = item.classList.contains(‘clase2’);document.write(‘<br>’, ‘Tiene la clase «clase2»: ‘, hasClase2);

Este código nos devolverá un valor booleano: ‘true’ si la clase ‘clase2’ está presente o ‘false’ si no lo está.

Métodos disponibles en classList

classList dispone de varios métodos para la manipulación de clases de los elementos. Estos son algunos de los más comunes y útiles:

Método Descripción Ejemplo
add(String[, String]) Añade una o más clases al elemento. Clases existentes no se duplicarán. item.classList.add(‘nueva-clase’);
remove(String[, String]) Remueve una o más clases del elemento. No produce error si la clase no existe. item.classList.remove(‘clase-vieja’);
item(Number) Retorna el valor de la clase en el índice dado. var clase = item.classList.item(0);
toggle(String[, force]) Si una clase está presente la remueve y retorna ‘false’, si no está la añade y retorna ‘true’. item.classList.toggle(‘toggle-clase’);
contains(String) Verifica si la clase dada existe en el elemento. var contiene = item.classList.contains(‘clase2’);
replace(oldClass, newClass) Reemplaza una clase existente por una nueva. item.classList.replace(‘vieja-clase’, ‘nueva-clase’);

Ejemplos documentados

Veamos a continuación cómo aplicar estos métodos con ejemplos de código completos y funcionales. Comencemos por añadir una clase a un elemento:

var item = document.getElementById(‘Nombre’);item.classList.add(‘nueva-clase’);

Este ejemplo le añadirá al elemento con id ‘Nombre’ la clase ‘nueva-clase’ que podríamos utilizar para modificar su estilo o comportamiento.

Ahora, vamos a remover una clase:

item.classList.remove(‘clase-para-remover’);

Si la clase ‘clase-para-remover’ existe en el elemento, será eliminada. En caso contrario, no sucederá nada y no se generará ningún error.

Finalmente, vamos a remplazar una clase por otra:

item.classList.replace(‘vieja-clase’, ‘nueva-clase’);

En este caso, si la clase ‘vieja-clase’ existe en el elemento, será reemplazada por ‘nueva-clase’. De lo contrario, no se realizará ninguna acción.

Conocer y entender estos métodos te proporcionará un poderoso conjunto de herramientas para manipular el DOM de forma efectiva en tus proyectos web. La clave está en practicar y aplicarlos en múltiples escenarios para afianzar tu comprensión y habilidades de programación en JavaScript.

Te puede interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *