El DOM (Document Object Model)
Cuando el navegador carga una página HTML, no se queda con el texto: construye en memoria una estructura de objetos que representa cada etiqueta, atributo y texto. Esa estructura es el DOM (Document Object Model).
El DOM es un árbol: el documento contiene a <html>, que contiene a
<head> y <body>, que a su vez contienen otros elementos. Cada nodo del
árbol es un objeto con propiedades y métodos que JavaScript puede leer y
modificar.
<body>
<h1>Hola</h1>
<p>Bienvenido</p>
</body>
Ese HTML produce un árbol así:
document
└─ html
└─ body
├─ h1 → "Hola"
└─ p → "Bienvenido"
El objeto document
El punto de entrada al DOM es la variable global document. A partir de ella
puedes buscar elementos, crearlos o modificarlos:
console.log(document.title); // título de la pestaña
Nota sobre este entorno de prácticas: el editor incluye un
documentde práctica (una versión reducida del real) con undocument.bodyvacío. Soporta lo esencial —createElement,textContent,classList,setAttribute,appendChild,querySelector/querySelectorAll(selectores#id,.clase,etiqueta),getElementById,addEventListeneryclick()— así que en los ejercicios manipularás el DOM de verdad, no solo cadenas.
Ejemplos
Recorrer el DOM (ejemplo ilustrativo de navegador)
// En un navegador real esto leería la página.
// Aquí solo lo mostramos como ilustración del concepto:
const html = "<ul><li>uno</li><li>dos</li></ul>";
console.log("Estructura como texto:", html);