Marc Semper Lloret
← El DOM: la web que responde

Sesión 3 · Semana 1

Modificar el documento

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se cambia el texto, las clases, los atributos y el estilo de un elemento.
  2. 2. Haz: Cambia el estado visual de tu catálogo desde el código.
  3. 3. Comprueba: Cambias clases, no estilos en línea.

Antes de empezar · 5 minutos, sin apuntes

  1. Si un producto se agota, ¿qué debería cambiar en la página?
  2. ¿Dónde está escrito cómo se ve un producto agotado: en el CSS o en el JavaScript?
  3. ¿Qué riesgo ves en insertar texto escrito por un usuario dentro del HTML?

Contenido

const titulo = document.querySelector("h1");

titulo.textContent = "Catálogo de productos";     // texto plano: lo habitual
titulo.innerHTML = "Catálogo <strong>2026</strong>";  // interpreta etiquetas

Por defecto, textContent

Insertar con innerHTML un texto que venga de fuera —lo que alguien escribió en un campo, lo que devolvió una API— permite colar etiquetas y código en tu página. Es la vía de entrada de los ataques de inyección.

textContent escribe texto y solo texto: el contenido se muestra literalmente, sin interpretarse ni ejecutarse. Usa innerHTML únicamente con marcado que hayas escrito tú, y nunca con datos del usuario.

Clases: el puente con el CSS

const tarjeta = document.querySelector("[data-js='producto-1']");

tarjeta.classList.add("agotado");
tarjeta.classList.remove("agotado");
tarjeta.classList.toggle("destacado");
tarjeta.classList.contains("agotado");    // true / false

JavaScript pone clases; el CSS decide cómo se ven

Es la separación de capas de siempre, ahora en la tercera. Tu código dice qué está pasando —«esto está agotado», «esto está cargando»— y la hoja de estilos dice cómo se representa.

Si en lugar de eso escribes elemento.style.backgroundColor = "grey", has metido una decisión de diseño dentro del comportamiento: nadie la encontrará buscando en el CSS, y no responderá al modo oscuro ni al tema de la UD2.

Atributos y datos

const enlace = document.querySelector("a");

enlace.getAttribute("href");
enlace.setAttribute("href", "productos.html");
enlace.removeAttribute("target");
enlace.hasAttribute("download");

// Los atributos data- tienen su propio acceso
const tarjeta = document.querySelector("[data-id='7']");
tarjeta.dataset.id;            // "7"  ← siempre texto
Number(tarjeta.dataset.id);    // 7
tarjeta.dataset.categoria = "teclados";

dataset será la forma de saber, en la semana 2, a qué producto corresponde el botón que se acaba de pulsar. Conviene observar de nuevo el mismo detalle: el valor llega como texto.

Estilos, y el caso en que sí valen

elemento.style.setProperty("--altura-imagen", "220px");

Cambiar una variable CSS de las que definiste en la UD2 sí es legítimo: el valor es un dato —una posición, una altura calculada, un porcentaje de progreso— y la regla que lo usa sigue viviendo en la hoja de estilos.

Tarea 3 · Estado visual desde el código

En tu página de productos, con el catálogo todavía escrito a mano en HTML:

  1. Marca con la clase agotado los productos sin stock, leyendo el dato de dataset.
  2. Escribe en un párrafo cuántos productos hay disponibles.
  3. Añade un botón que alterne una clase de vista compacta en la lista.
  4. Cambia el title de la pestaña para incluir el número de resultados.
  5. Prueba a hacer lo mismo con style y explica por escrito por qué es peor.
Objetivo mínimoClases aplicadas según datos, y un recuento escrito en la página.
Si lo tienesQue la clase de vista compacta se aplique a todas las tarjetas de una vez.
RetoEscribe un texto con etiquetas usando textContent y observa qué se ve. Explica por qué eso es exactamente lo que quieres.

Cierre de la semana 1

  • Explicas qué es el DOM y por qué no es tu fichero.
  • Seleccionas por anclajes pensados para el código.
  • Cambias texto con textContent y aspecto con clases.
  • Sabes por qué innerHTML con datos ajenos es un riesgo.
Ver respuestas

1 · Porque permite insertar etiquetas y código que llegan desde fuera; textContent los muestra como texto.

2 · Añadiendo o quitando clases, para que el aspecto siga viviendo en el CSS.

3 · Como texto: dataset siempre devuelve cadenas y hay que convertir.

Microprueba semanal 1 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Explica en dos líneas la diferencia entre tu fichero HTML y el DOM.
  2. Escribe la selección de un elemento por atributo data-, y di qué devuelve si no lo encuentra.
  3. ¿Por qué cambiamos una clase en lugar de un estilo en línea?
---