Manipulación del DOM: Cambiar Clases y Estilos

El DOM permite modificar el contenido, las clases y los estilos de los elementos HTML de manera dinámica. A continuación, veremos cómo realizar estas modificaciones con JavaScript.

Seleccionar Elementos del DOM

Primero, necesitamos seleccionar los elementos del DOM para poder modificarlos. Esto se puede hacer con métodos como getElementById, querySelector o getElementsByClassName.

let elemento = document.getElementById("miElemento");  // Selecciona por ID
let parrafo = document.querySelector("p");  // Selecciona el primer <p>
let elementos = document.getElementsByClassName("clase");  // Selecciona todos los elementos con la clase

Cambiar Clases con `classList`

Podemos utilizar classList para agregar, eliminar o alternar clases en un elemento. Esto nos permite cambiar dinámicamente la apariencia de un elemento.

// Seleccionar el elemento
let caja = document.getElementById("miCaja");

// Agregar una clase
caja.classList.add("highlight");

// Eliminar una clase
caja.classList.remove("highlight");

// Alternar una clase (si está, la quita; si no está, la añade)
caja.classList.toggle("highlight");

Cambiar Estilos con `style`

Podemos cambiar los estilos CSS de un elemento utilizando la propiedad style. Esta propiedad nos permite modificar cualquier estilo en línea del elemento.

// Cambiar el color de fondo
caja.style.backgroundColor = "lightblue";

// Cambiar el tamaño de la fuente
caja.style.fontSize = "20px";

// Ocultar el elemento
caja.style.display = "none";

// Mostrar el elemento
caja.style.display = "block";

Ejemplo Práctico

Aquí tienes un ejemplo completo donde se manipulan clases y estilos mediante un botón que cambia los estilos de una caja cuando se hace clic.

// Selecciona la caja y el botón
let caja = document.getElementById("miCaja");
let boton = document.getElementById("miBoton");

// Agregar evento para cambiar estilos al hacer clic
boton.addEventListener("click", function() {
    caja.classList.toggle("highlight");  // Alterna la clase 'highlight'
    caja.style.backgroundColor = "lightgreen";  // Cambia el color de fondo
});

Conclusión

Modificar clases y estilos en el DOM con JavaScript permite crear páginas web más interactivas y dinámicas. Utilizando classList y style, puedes controlar cómo se muestran y comportan los elementos en tu página.