Manipulación del DOM en JavaScript

Modifica el DOM con JavaScript sin depender de frameworks o librerías externas. Descubre cómo seleccionar, crear y actualizar elementos en un documento HTML.

El Document Object Model (DOM) es la estructura que representa un documento HTML en el navegador. JavaScript permite interactuar con esta estructura para modificar el contenido, la apariencia y el comportamiento de una página en tiempo real.

Seleccionar elementos del DOM

En JavaScript hay varios métodos para seleccionar elementos del DOM:

// Selección por ID
const titulo = document.getElementById("titulo");

// Selección por clase CSS (devuelve una colección de elementos)
const elementos = document.getElementsByClassName("clase");

// Selección por etiqueta
const parrafos = document.getElementsByTagName("p");

// Selección con querySelector (solo el primer elemento que coincida)
const primerElemento = document.querySelector(".clase");

// Selección con querySelectorAll (todos los elementos que coincidan)
const todosLosElementos = document.querySelectorAll(".clase");

querySelector y querySelectorAll son más flexibles porque permiten usar selectores CSS.

Modificar contenido y atributos

Una vez seleccionado el elemento, se pueden modificar diferentes propiedades:

const titulo = document.getElementById("titulo");

// Cambiar el texto
titulo.textContent = "Nuevo título";

// Modificar HTML interno (¡Úsalo con cuidado!)
titulo.innerHTML = "<span style='color: red;'>Título en rojo</span>";

// Cambiar atributos
titulo.setAttribute("data-descripcion", "valor personalizado");
console.log(titulo.getAttribute("data-descripcion"));

titulo.removeAttribute("data-descripcion");

Agregar y eliminar elementos

Crear nuevos elementos y agregarlos al DOM:

const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este es un nuevo párrafo.";

document.body.appendChild(nuevoParrafo); // Agregar al final del <body>

Para eliminar un elemento:

const elementoAEliminar = document.getElementById("elemento");
elementoAEliminar.remove();

Modificar clases y estilos

Cambiar la apariencia de un elemento:

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

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

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

// Alternar clases
caja.classList.toggle("activo");

// Modificar estilos directamente
caja.style.backgroundColor = "lightblue";

Conclusión

Manipular el DOM con JavaScript permite actualizar contenido, modificar estilos y eliminarlos sin necesidad de librerías adicionales. Conocer estos métodos básicos es suficiente para realizar interacciones dinámicas en cualquier página web.