Uso de classList para Manipular Clases en Elementos HTML

Clase 9 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Qué es classList y por qué es útil?

La manipulación de clases en elementos HTML es esencial para crear aplicaciones web interactivas y dinámicas. Para gestionar estas clases, classList surge como una herramienta poderosa y versátil. A diferencia de className, que sobrescribe la clase de un elemento HTML, classList permite agregar, eliminar o alternar clases sin modificar las que ya existen. Esta funcionalidad es crucial cuando se desea realizar cambios de estilo sobre la marcha manteniendo intactas otras propiedades del componente.

¿Cómo utilizar el método toggle() de classList?

El método toggle() de classList permite cambiar la presencia de una clase en un elemento. Es decir, si la clase ya está presente, toggle() la elimina; si no está presente, la agrega. Esta simplicidad es especialmente útil en sitios web donde es necesario ocultar o mostrar contenido con un solo clic.

Ejemplo práctico de toggle()

Para entender mejor, imaginemos un ejercicio práctico:

Se tiene un menú que es visible por defecto.
Al presionar un botón denominado "Toggle Visibility", se quiere que el menú se oculte o aparezca dependiendo de su estado actual.

El código JavaScript para lograr esto sería el siguiente:

const button = document.querySelector('button');
const menu = document.querySelector('.mainMenu');

button.addEventListener('click', function() {
  menu.classList.toggle('invisible');
});

Este script selecciona el botón y el menú. Al escuchar el evento de clic en el botón, alterna la clase invisible en el menú, ocultando o mostrando el menú de acuerdo a la presencia de esta clase.

Otros métodos útiles en classList

Además de toggle(), classList ofrece otros métodos útiles para manipular clases de forma efectiva:

add(clase): Añade una clase al elemento, si aún no está presente.
remove(clase): Elimina una clase del elemento.
contains(clase): Devuelve true o false dependiendo de si la clase especificada está presente en el elemento. Esto es útil para verificar el estado de un elemento antes de realizar ciertas acciones.

Recomendaciones para el uso de classList

Al utilizar classList, es importante prestar atención a las siguientes recomendaciones:

Compatibilidad del navegador: Aunque classList es ampliamente soportada por los navegadores modernos, es importante verificar la compatibilidad para asegurar que toda la audiencia pueda interactuar correctamente con el contenido.
Nombres de clases significativos: Usar nombres de clases descriptivos facilita la comprensión del propósito de cada estilo aplicado y mejora la mantenibilidad del código.
Pruebas y depuración: Verifique en la consola de herramientas de desarrollo del navegador si las clases se aplican como se espera, para detectar y corregir cualquier comportamiento inesperado.

Experimentar con classList puede transformar la interacción de los usuarios con tus aplicaciones web, haciendo que se sientan más dinámicas e intuitivas. Con estas herramientas y consejos, estás listo para llevar tus habilidades de desarrollo web al siguiente nivel. ¡Sigue explorando y aprendiendo para diseñar experiencias de usuario excepcionales!

Alejandro Ramirez

student•

• classList: Es una propiedad en JavaScript que proporciona una manera conveniente de acceder y manipular las clases CSS de un elemento HTML. Te permite agregar, quitar, alternar y verificar la presencia de clases en los elementos sin necesidad de manipular directamente la cadena completa de la propiedad "className".

METODOS DE classList:

• .add : Agrega clases.

• .remove: Elimina clases.

• .toggle: Alterna la presecia de una clase.

• .contains: Verifica si una clase esta presente.

• .replace: Remplaza una clase por otra.

• .lenght: Devuelve el numero de clases en el elemento.

Usar classList es mucho mas limpio y seguro que manipular la propiedad className directamente, ya que evita problemas con la manipulacion de cadenas y garantiza que las clases se gestionen correctamente.

Benjamin Allen Ramirez Horna

student•

podrias pasar tu codigo..

Natalia Gallego Heras

student•

'Toggle' es como se llama en inglés a un interruptor que tiene dos opciones como encendido / apagado, modo claro / modo oscuro... Puede tener este aspecto:

Daniel Andres Rojas Paredes

student•

como el 3 metodo no me funcionaba decidi hacer el segundo, tampoco me funciono, depure css y js , me pace al primer metodo, y dije a ok este si funciono el problema no esta en el js, luego me llego como un rayo que me hizo carcajear, despues de 30 minutos depurando el codigo, mirando si estaba usando mal los selectores o el get element. el porque de este recordatorio que les dejo.

ENLACEN SU ARCHIVO CSS A EL HTML¡¡¡¡ JAJAJAJAJ

Sebastián Martínez

student•

Un clásico xD me ha pasado más veces de la que quisiera admitir... eso y algún {, (, [ o " mal puesto

Manuel Camacho

student•

como buena practica, siempre que enlaces un archivo, ya sea css, js, etc, antes de cualquier otra cosa, verifica que esté enlazado correctamente, por ejemplo para un css, en tu archivo pon un background color o en tu JS pon un console.log.

Ysabella Navas

student•

classList en JavaScript es una propiedad súper útil que te permite acceder, añadir, eliminar y alternar clases CSS en un elemento HTML sin tener que escribir todo el atributo class manualmente. Es como un mini gestor de clases ✨.

Ejemplo básico:

const caja = document.querySelector('.caja');

caja.classList.add('activa'); // Añade una clase

caja.classList.remove('oculta'); // Elimina una clase

caja.classList.toggle('resaltada'); // Si tiene la clase, la quita; si no, la añade

caja.classList.contains('activa'); // Devuelve true o false si tiene la clase

¿Por qué es mejor que modificar className?

className reemplaza todas las clases.
classList permite manipularlas individualmente, sin dañarte el resto.

Edicson Armando Hurtado Lozano

student•

para que funcione el method hay que inicializar la función.

const button = document.querySelector("button"); const menu = document.querySelector(".menu"); button.addEventListener("click", () => { menu.classList.toggle("invisible"); });

Orlando Alonso Gonzales Paz

student•

Les dejo mis apuntes:

// Obtenemos el elemento del DOM con el id "app-title" y lo almacenamos en la variable 'titulo'
const titulo = document.getElementById("app-title");

// Modificamos el estilo de fondo (background-color) del elemento 'titulo' a rojo (red)
console.dir(titulo.style.backgroundColor = "red");

// Cambiamos el color del texto (color) dentro del elemento 'titulo' a blanco (white)
console.dir(titulo.style.color = "white");

// Seleccionamos el primer elemento <menu> del documento usando 'querySelector' y lo guardamos en la variable 'menu'
const menu = document.querySelector("menu");

// Cambiamos el color de fondo (background-color) del elemento 'menu' a rojo (red)
console.dir(menu.style.backgroundColor = "red");

// Cambiamos el tamaño de la fuente (font-size) del texto dentro del elemento 'menu' a 25 píxeles
console.dir(menu.style.fontSize = "25px");

// Sobrescribimos la clase CSS del elemento 'menu', asignándole una nueva clase llamada "main-menu"
console.dir(menu.className = "main-menu");

Victor Manuel Polo Ruedas

student•

Sí, puedes usar toggle en JavaScript para manipular clases incluso si el CSS está en un archivo externo enlazado con <link> en HTML. La propiedad classList y su método toggle funcionan independientemente de dónde provenga el CSS. Al agregar o quitar clases a través de JavaScript, el estilo definido en el archivo CSS se aplicará automáticamente. Esto permite que tu aplicación tenga estilos dinámicos basados en la interacción del usuario.

Kyb3r Cipher

student•

Olvidaba que existia el method de .toggle() en classList buen recordatorio!

Jesús Alberto López Galindo

student•

Yo habia pensado en una solución como esta:

let truly = true;

function toggle() {

truly = !truly;

menu.className = truly === false ? "invisible" : "menu";

}

Igual funciona y creo que para quien no conoce función flecha y el método toggle a cabalidad está perfecto, ademas profe ya 10 clases y no ha dejado ni un ejercicio, hombre.

Jesús Alberto López Galindo

student•

PD: En el HTML en la linea donde está el botón hay que agregar el evento para que funcione, quedaría algo asi:

<button onclick="toggle()">Toggle visibility</button>

Calvin Rafael Bobadilla Fernandez

student•

Mi solucion original era mas larga pero diria que sencilla XDD, aca la comparto:

function invisible() {
    menu.style.display = 'none'
}
function visible() {
    menu.style.display = 'block'
}

button.addEventListener('click', invisible)

button2.addEventListener('click', visible)

Uso de classList para Manipular Clases en Elementos HTML

Entendiendo el DOM

Manipulación del DOM con JavaScript y APIs

Entendiendo el DOM y su Manipulación con JavaScript

Diferencias entre el DOM y el objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Navegación Jerárquica del DOM en JavaScript

Manipulando Elementos del DOM

Atributos y Propiedades en HTML y su Manipulación con JavaScript

Modificar texto en HTML con JavaScript

Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName