L66 - DOM: Introducción

🧠 Concepto

El DOM (Document Object Model) es una representación del documento HTML como un árbol de nodos que JavaScript puede manipular. Cuando el navegador carga una página web, crea el DOM a partir del HTML, permitiendo que scripts accedan y modifiquen la estructura, el estilo y el contenido.

document y window

Dos objetos globales fundamentales:

window: representa la ventana del navegador. Es el objeto global en el navegador. Todo lo que no está dentro de un ámbito local es propiedad de window.
document: representa el documento HTML cargado en la ventana. Es el punto de entrada al DOM.

console.log(window === this); // true (en el ámbito global)
console.log(document.documentElement); // <html>
console.log(document.head);             // <head>
console.log(document.body);             // <body>
console.log(document.title);            // título de la página

📝 Tipos de nodos

El DOM está compuesto por diferentes tipos de nodos. Los más importantes son:

Element node

Representa una etiqueta HTML (<div>, <p>, <a>, etc.). Es el tipo de nodo que más vamos a manipular.

const div = document.createElement('div');
console.log(div.nodeType); // 1 (ELEMENT_NODE)

Text node

Representa el texto dentro de un elemento. Es hijo directo del elemento que lo contiene.

const p = document.querySelector('p');
console.log(p.firstChild.nodeType); // 3 (TEXT_NODE)

Comment node

Representa comentarios HTML (). Generalmente se ignoran.

console.log(document.body.childNodes);
// Incluye elementos, texto (saltos de línea) y comentarios

Constante	Valor	Descripción
`Node.ELEMENT_NODE`	1	Etiqueta HTML
`Node.ATTRIBUTE_NODE`	2	Atributo (obsoleto, no usar)
`Node.TEXT_NODE`	3	Texto dentro de un elemento
`Node.COMMENT_NODE`	8	Comentario HTML
`Node.DOCUMENT_NODE`	9	El documento completo

💻 Relaciones entre nodos

Cada nodo tiene relaciones con otros nodos en el árbol:

<div id="contenedor">
  <p>Hola <strong>mundo</strong></p>
  <span>Adiós</span>
</div>

const div = document.getElementById('contenedor');

// Nodo padre
console.log(div.parentNode);           // <body>

// Nodos hijos (todos los tipos)
console.log(div.childNodes);           // NodeList: [text, p, text, span, text]

// Hijos que son elementos (solo etiquetas)
console.log(div.children);             // HTMLCollection: [p, span]

// Primer y último hijo
console.log(div.firstChild);           // text (salto de línea)
console.log(div.firstElementChild);    // <p> (primer elemento)
console.log(div.lastChild);            // text
console.log(div.lastElementChild);     // <span>

// Hermanos
const p = document.querySelector('p');
console.log(p.nextSibling);            // text (salto de línea)
console.log(p.nextElementSibling);     // <span>
console.log(p.previousSibling);        // text
console.log(p.previousElementSibling); // null (es el primero)

// El elemento root
console.log(document.documentElement); // <html>

⚠️ Diferencia clave: childNodes incluye todos los nodos (texto, comentarios, elementos), mientras que children solo incluye elementos (etiquetas HTML). Lo mismo aplica para firstChild vs firstElementChild, nextSibling vs nextElementSibling, etc.

🧠 Recorrer el DOM

Hacia abajo (navegar a hijos)

const body = document.body;

// Todos los hijos (incluyendo texto)
for (const node of body.childNodes) {
  console.log(node.nodeType, node.nodeName);
}

// Solo elementos hijos
for (const el of body.children) {
  console.log(el.tagName);
}

Hacia arriba (navegar a padres)

const strong = document.querySelector('strong');
console.log(strong.parentNode);           // <p>
console.log(strong.parentElement);        // <p>
console.log(strong.closest('div'));       // <div id="contenedor">
console.log(strong.closest('body'));      // <body>

`closest()`: el más útil

Busca el ancestro más cercano (incluyendo el propio elemento) que coincida con el selector CSS:

document.addEventListener('click', (e) => {
  const tarjeta = e.target.closest('.tarjeta');
  if (tarjeta) {
    console.log('Clic en tarjeta:', tarjeta.dataset.id);
  }
});

💻 Navegación rápida con propiedades específicas

// Formularios
console.log(document.forms);       // HTMLCollection de formularios
console.log(document.forms[0]);    // primer formulario

// Enlaces
console.log(document.links);       // todos los <a>
console.log(document.images);      // todas las <img>

// Anclas
console.log(document.anchors);     // todos los <a name="...">

📝 El DOM no es el HTML

Importante: el DOM es una representación en memoria del HTML. Cuando JavaScript modifica el DOM, la página se actualiza visualmente, pero el archivo HTML original no cambia. El DOM es vivo y dinámico.

// Esto NO cambia el archivo HTML
document.body.innerHTML = '<h1>Nuevo contenido</h1>';
// Pero la página se ve diferente

🎯 Regla de oro: piensa en el DOM como un árbol de nodos. Aprende a navegarlo con parentNode, children, nextElementSibling y closest(). Usa firstChild/childNodes solo cuando necesites nodos de texto o comentarios.