Maquetación Web Dinámica / JavaScript para maquetadores: darle vida al DOM

El DOM es un árbol: seleccionar y modificar

Teoría20 min20 XP

Ya maquetas con HTML y CSS, y en los módulos de juegos escribiste bastante JavaScript. Ahora unes las dos mitades: usar JS para MODIFICAR tu HTML en vivo — cambiar textos, colores y clases según lo que hace el usuario. La puerta de entrada es entender qué es el DOM y cómo agarrar un elemento para tocarlo. Es el superpoder que convierte una página estática en una interfaz viva.

El HTML es papel; el DOM es la marioneta

Y es un ÁRBOL: <body> es el tronco, dentro tiene ramas (<header>, <main>), que tienen sub-ramas (<h1>, <p>), hasta las hojas (el texto). Cada nodo tiene padre, hijos y hermanos — la misma jerarquía que ya usabas para el CSS de :has() y los selectores de descendencia.

Agarrar un elemento: querySelector

Para tocar un elemento, primero lo seleccionas — y la buena noticia es que ya sabes CÓMO: con selectores CSS, los mismos del módulo 3.

seleccionar.js

querySelector devuelve el PRIMER elemento que coincide (o null si no hay ninguno — cuídate de eso); querySelectorAll devuelve todos, para recorrer con forEach. Como reciben selectores CSS, todo tu vocabulario de selectores sirve: querySelector("nav a.activo") funciona igual que en tu hoja de estilos.

Leer y cambiar: texto, atributos, estilo

modificar.js

// TEXTO: leer y escribir el contenido
titulo.textContent = "Hola, mundo";           // reemplaza el texto
const actual = titulo.textContent;            // lo lee

// ATRIBUTOS: src, href, alt, disabled...
imagen.setAttribute("src", "otra.jpg");
boton.disabled = true;                        // propiedades comunes, directas

// ESTILO: preferir cambiar CLASES, pero se puede tocar el estilo directo
caja.style.background = "#6d28d9";
caja.classList.add("resaltado");              // lo idiomático (próxima lección)

Regla de oro que verás reforzada en la lección 2: para cambiar la apariencia, prefiere agregar/quitar CLASES (que definiste en CSS) sobre escribir element.style a mano. El CSS define el "cómo se ve"; JS solo decide "cuándo". Mantener esa separación es lo que distingue código mantenible de un enredo.

Tócalo tú

<div class="tarjeta">
<h2 id="saludo">Hola, visitante</h2>
<input id="nombre" type="text" placeholder="Escribe tu nombre" aria-label="Tu nombre">
<button id="btn">Saludar</button>
</div>

body { font-family: system-ui; padding: 20px; background: #f8fafc; }
.tarjeta { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; max-width: 320px; display: grid; gap: 12px; }
h2 { margin: 0; color: #1e293b; font-size: 20px; }
input { padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; }
button { padding: 10px; border: 0; border-radius: 8px; background: #6d28d9; color: white; font-weight: 600; font-size: 14px; cursor: pointer; }

const saludo = document.querySelector("#saludo");
const input = document.querySelector("#nombre");
const boton = document.querySelector("#btn");

boton.addEventListener("click", () => {
const nombre = input.value.trim();       // leer el valor del input
if (nombre) {
  saludo.textContent = "¡Hola, " + nombre + "!";   // modificar el texto
  saludo.style.color = "#6d28d9";                  // y el estilo
}
});

Escribe tu nombre y pulsa el botón: querySelector agarró los tres elementos, leíste el value del input y modificaste el textContent y el color del saludo. Eso es la interactividad web en su forma más pura — seleccionar, leer, modificar.

Escribes const boton = document.querySelector('.enviar') y al usar boton.addEventListener(...) da error 'boton is null'. ¿Qué suele causarlo?

Mini-reto

En tu periódico "El Observador", agrega un botón "Modo grande" que, al pulsarlo, seleccione el <article> principal y le suba el style.fontSize a 20px. Luego mejóralo: en vez de tocar el estilo, prepara una clase .texto-grande en tu CSS y solo agrégala desde JS (adelanto de la próxima lección). Sentir la diferencia entre las dos vías te prepara para la regla de oro.

Qué sigue

Cambiaste estilos a mano con .style, pero lo profesional es orquestar CLASES. La próxima lección se centra en classList — toggle, add, remove — el interruptor que enciende y apaga tus estilos CSS desde JS. Es, sin exagerar, el patrón número uno de toda la interactividad web.