El DOM
Tu archivo HTML se carga una vez, y luego la página se queda allí. Pero un cuadro de búsqueda que sugiere resultados mientras escribes, un menú que se abre al hacer clic, un contador que aumenta, nada de eso está en el archivo HTML. Algo cambia lo que hay en la página después de que ha cargado, y ese algo es JavaScript llegando a la página a través del DOM. Este capítulo trata sobre ese alcance: cómo JavaScript encuentra las partes de una página y las cambia para que la página se actualice frente al lector.
Qué es el DOM
Cuando el navegador carga tu página, lee tu HTML y construye un árbol de objetos a partir de él: un objeto para la página, uno para <body>, uno para cada encabezado, párrafo y botón adentro. Ese árbol es el DOM, abreviatura de Document Object Model. Tu JavaScript puede leer este árbol y cambiarlo, y cuando lo hace, la página que ves se actualiza de inmediato.
La parte que vale la pena recordar: el DOM no es tu archivo HTML. Es la versión viva de la página, sentada en la memoria del navegador. Tu archivo .html es la receta inicial; el DOM es el plato terminado que el navegador está sirviendo, y JavaScript puede reorganizar el plato mientras todos todavía están comiendo.
Cada elemento en el DOM es un objeto, del mismo tipo que encontraste en objetos, con propiedades que puedes leer y cambiar. Ese es el truco completo: porque la página es objetos, y ya sabes cómo trabajar con objetos, cambiar la página es cambiar propiedades de objetos.
Seleccionar elementos
Antes de poder cambiar un elemento, tienes que encontrarlo en el árbol. Lo señalas de la misma manera que CSS, con un selector, y el navegador te devuelve el objeto coincidente.
El caballo de batalla es document.querySelector. Le das un selector CSS, el mismo tipo de patrón que usas en CSS, y te devuelve el primer elemento que coincide:
const card = document.querySelector(".card"); // primer elemento con class="card"
const total = document.querySelector("#total"); // el elemento con id="total".card coincide por clase, #total coincide por id, y una palabra simple como "button" coincide por nombre de etiqueta. querySelector te da la primera coincidencia y se detiene allí. Cuando quieres cada coincidencia en su lugar, usa querySelectorAll, que devuelve una lista que puedes recorrer:
const cards = document.querySelectorAll(".card"); // todos los elementos con class="card"
console.log(cards.length); // cuántos encontróSi nada coincide, querySelector devuelve null, que es la forma de JavaScript de decir "no hay nada aquí".
document.querySelector un selector CSS como .card o #total, y te da la primera coincidencia. Usa querySelectorAll cuando quieras todas como una lista. Si nada coincide obtienes null, que significa "nada aquí". Leer y cambiar elementos
Una vez que tienes un elemento, lo lees y cambias a través de sus propiedades, de la misma manera que lees y cambias cualquier objeto. Aquí es donde la página realmente comienza a moverse.
La propiedad que usarás más es textContent, el texto dentro de un elemento. Puedes leerlo o configurarlo:
const total = document.querySelector("#total");
total.textContent = "42 elementos"; // la página ahora muestra "42 elementos"Para cambiar cómo se ve algo, usualmente añades o eliminas una clase y dejas que CSS haga el estilo. classList tiene tres métodos para eso:
const card = document.querySelector(".card");
card.classList.add("selected"); // añadir una clase
card.classList.remove("selected"); // quitarla
card.classList.toggle("selected"); // añadir si falta, quitar si presenteTambién puedes configurar un estilo único directamente a través de .style, y establecer un atributo como src o href con setAttribute:
card.style.color = "crimson"; // un estilo en línea
const avatar = document.querySelector(".avatar");
avatar.setAttribute("src", "maría.jpg"); // establecer la fuente de imagenRecurre a classList primero y .style solo para ajustes puntuales, porque mantener tu estilo en CSS lo mantiene en un solo lugar.
textContent, y cambia su apariencia añadiendo o eliminando una clase con classList.add, remove, y toggle. Usa .style para un ajuste puntual y setAttribute para cosas como una fuente de imagen. Apóyate en clases para que tu estilo se mantenga en tu CSS. Crear y eliminar elementos
Cambiar elementos que ya existen te lleva lejos, pero a veces no hay nada allí todavía: un pendiente que estás añadiendo, un resultado de búsqueda llegando. Para eso construyes nuevos elementos y los pones en el árbol, y sacas los viejos.
Haces un nuevo elemento con document.createElement, le das algo de contenido, luego lo añades a la página con append:
const list = document.querySelector(".todo-list");
const item = document.createElement("li"); // un nuevo <li>, no en la página aún
item.textContent = "Comprar leche de avena"; // darle algo de texto
list.append(item); // ahora aparece, al final de la listaUn nuevo elemento de createElement existe solo en memoria hasta que lo append en algún lugar; ese es el paso que lo pone en la página. Para sacar un elemento de la página, llama a remove en él:
item.remove(); // desaparecido de la páginadocument.createElement, dale texto con textContent, y ponlo en la página con append. Un elemento fresco vive solo en memoria hasta que lo añadas, así que ese paso es lo que lo hace aparecer. Para sacarlo de la página, llama a remove en él. Por dónde continúa el DOM
Seleccionar, leer, cambiar, crear y eliminar cubren la mayoría de lo que JavaScript hace en una página, y todo es el mismo movimiento por debajo: encontrar un objeto en el árbol y cambiar sus propiedades. Porque el DOM es objetos, todo lo que aprendiste en objetos se aplica directamente aquí, y el pequeño conjunto de métodos en este capítulo (querySelector, textContent, classList, createElement, append) es la mayoría del kit de herramientas.
Lo que falta hasta ahora es la sincronización. Cada ejemplo aquí se ejecuta una sola vez, de arriba a abajo, pero una página real cambia en respuesta a lo que hace el lector: un clic, una pulsación de tecla, un formulario enviado. Conectar tus cambios de DOM a esos momentos es eventos, el siguiente capítulo, donde addEventListener conecta "el usuario hizo esto" a "así que la página hace aquello". Una vez que seleccionar y cambiar se junten con responder a eventos, puedes construir las páginas interactivas en las que se enfoca el resto de este manual.