Lección 7 · El DOM y los eventos

Qué es el DOM

El DOM (Document Object Model) es la representación que el navegador hace de la página: cada etiqueta HTML se convierte en un objeto que JavaScript puede leer y modificar. Cuando el navegador carga el HTML, arma ese árbol de objetos; JavaScript lo toca y la página cambia en pantalla.

La diferencia con todo lo anterior: hasta ahora el programa solo escribía en la consola. El DOM es la puerta para que el JavaScript cambie lo que se ve.

<p id="total">$0</p>
<button id="agregar">Agregar empanada</button>

Ese HTML crea dos objetos en el DOM: el párrafo #total y el botón #agregar. JavaScript los busca por su id y los usa.

Seleccionar elementos

Antes de modificar algo hay que encontrarlo. Las dos formas de todos los días:

const total = document.getElementById("total");
const boton = document.querySelector("#agregar");

Si el elemento no existe, devuelve null, y usarlo después da error. Por eso el <script> va al final del <body>: para que cuando el código busque, el elemento ya exista.

Cambiar el contenido

Con el elemento en mano, se lo modifica:

total.textContent = "$350";
total.classList.add("text-success");

• textContent cambia el texto de adentro, sin interpretar HTML.
• innerHTML interpreta HTML: sirve para insertar etiquetas, pero es peligroso con datos del usuario (XSS).
• classList.add / remove / toggle cambian las clases CSS.
• style.color = "red" cambia un estilo puntual (mejor hacerlo por clase).

Regla práctica: para texto, textContent; para HTML que se arma el propio programa, innerHTML con cuidado; y lo que viene del usuario, siempre como texto.

Eventos

Un evento es algo que pasa en la página: un clic, una tecla, el envío de un formulario. JavaScript puede escuchar ese evento y ejecutar una función cuando ocurre:

boton.addEventListener("click", () => {
    console.log("Se apretó el botón");
});

Se lee: «cuando alguien haga clic en boton, ejecutá esta función». Es la pieza que conecta el HTML con el JavaScript: el botón existe desde el HTML, y el comportamiento se agrega desde el JS.

El addEventListener se pone una vez, cuando carga la página, y la función se ejecuta cada vez que el evento ocurre.

Armar el panel

Con todo lo del curso se arma el panel del buffet: un botón que agrega empanadas, un total que se actualiza y una lista de la bandeja.

<p>Total: <strong id="total">$0</strong></p>
<button id="agregar">Agregar empanada ($350)</button>
<ul id="bandeja"></ul>

<script src="app.js"></script>

const PRECIO_EMPANADA = 350;
let total = 0;

const salidaTotal = document.getElementById("total");
const bandeja = document.getElementById("bandeja");
const boton = document.getElementById("agregar");

boton.addEventListener("click", () => {
    total += PRECIO_EMPANADA;
    salidaTotal.textContent = `$${total}`;

    const item = document.createElement("li");
    item.textContent = "Empanada";
    bandeja.appendChild(item);
});

Se lee de arriba abajo: se buscan los tres elementos, se escucha el clic del botón y, en cada clic, se suma al total, se actualiza el texto y se agrega un ítem a la lista. createElement crea un elemento nuevo y appendChild lo mete dentro de la lista.

Ahí está el curso entero en veinte líneas: variables y tipos, operadores, una función flecha como manejador, el DOM y el evento. Lo que sigue es practicar y agrandarlo: varios productos, restar stock, vaciar la bandeja.

Resumen

• El DOM es la página como objetos que JavaScript puede leer y modificar.
• Seleccionar: getElementById o querySelector; si no existe, devuelve null.
• textContent cambia texto; innerHTML interpreta HTML (cuidado con datos del usuario); classList cambia clases.
• addEventListener("click", fn) ejecuta una función cuando ocurre el evento.
• createElement + appendChild agregan elementos a la página.
• El <script> va al final del <body> para que los elementos ya existan.

Con esto se completa el recorrido: del primer console.log a una página que reacciona sola.

Autoevaluación de la lección 7