El DOM: tu HTML convertido en objetos vivos

Seis módulos imprimiendo en la consola. Hoy tu código toca LA PÁGINA: vas a cambiar el texto de un título desde JavaScript y verlo cambiar en pantalla. Ese puente entre tu código y lo que el usuario ve se llama DOM, y es lo que convierte documentos en aplicaciones.

El plano y el edificio

Tu primer cambio en la página

Cada etiqueta del HTML es ahora un objeto — con propiedades como las de los objetos del módulo 5. Cambia textContent en la línea 6 y mira la vista previa:

Fíjate en lo que acaba de pasar: seleccionaste un elemento, leíste su propiedad textContent como cualquier propiedad de objeto, la reasignaste… y la PANTALLA cambió. Todo lo que aprendiste de objetos aplica aquí, porque el DOM ES un montón de objetos.

Tu script puede llegar antes que el HTML

El navegador lee el documento de arriba a abajo, y ejecuta tu script en el momento en que lo encuentra. Si el script corre antes de que el navegador haya construido el <h1>… tu código busca un elemento que TODAVÍA no existe, recibe null, y explota al intentar usarlo.

function iniciar() {
// TODO tu código que toca el DOM vive aquí adentro
}

// ¿el navegador AÚN está construyendo el DOM?
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", iniciar);
} else {
iniciar(); // ya está listo: arranca de una
}

document.readyState vale "loading" mientras el DOM está en obra. Si es así, dejamos la instrucción: "cuando dispares el evento DOMContentLoaded (DOM terminado), ejecuta iniciar". Si ya terminó, llamamos iniciar() directo. addEventListener — "cuando pase esto, ejecuta esta función" — lo dominarás a fondo en el módulo 8; por ahora esas dos líneas son tu seguro.

Nota honesta: en tus propias páginas lo habitual es cargar el script con <script src="app.js" defer> (el atributo defer le dice al navegador "ejecútalo cuando el DOM esté listo") y listo. El patrón iniciar funciona en TODOS los escenarios — incluidos estos playgrounds, que a veces ejecutan tu código antes de armar el HTML — así que lo verás en todo el módulo.

Mini-reto

En el playground de arriba: 1) cambia el h1 para que diga "Mi Bolsillo" y el párrafo para que muestre tu ciudad; 2) rompe algo a propósito — pide document.querySelector("h2") (no existe) e imprímelo para ver null en frío; luego intenta leerle .textContent y estudia el error de la consola. Ese mensaje (Cannot read properties of null) lo verás mil veces: apréndete su cara hoy que sabes exactamente por qué sale.

Qué sigue

Hoy seleccionaste "el h1" a secas. Pero una página real tiene decenas de elementos, y necesitas apuntar con precisión: "el tercer gasto de la lista", "todos los botones de borrar". La próxima lección te da el arma: querySelector y querySelectorAll — que entienden los selectores CSS que ya dominas del supercurso de maquetación.