DOM en JavaScript: modelo de objetos del documento

El modelo de objetos del documento, o DOM, es el árbol dinámico de objetos de la página que mantiene el navegador. JavaScript lee y modifica estos objetos para actualizar la página sin recargarla. El navegador proporciona la API del DOM; JavaScript es el lenguaje que se usa para llamarla.

Empieza por el documento

document es el punto de entrada. document.documentElement se refiere a <html>, document.head a <head> y document.body a <body>. La pestaña del navegador está representada por window, cuya propiedad document se refiere a este documento.

Cada elemento del árbol es un nodo. Los elementos representan etiquetas; los nodos de texto contienen caracteres; los nodos de comentario contienen comentarios HTML; el nodo de documento está por encima de los elementos de la página. Sus valores de nodeType son 1, 3, 8 y 9, respectivamente. Todo elemento es un nodo, pero el texto y los comentarios no son elementos.

Lee las relaciones familiares

<ul id="menu"><li>Home</li><li>About</li></ul>

La lista es el padre de dos elementos de lista hermanos. Cada uno es su hijo. El primero tiene un nodo de texto hijo que contiene «Home». La lista es un antecesor de ese nodo de texto y el texto es un descendiente de la lista. Estas relaciones describen el anidamiento, no las posiciones en la pantalla.

Los espacios y saltos de línea entre etiquetas suelen convertirse en nodos de texto con espacios en blanco. Por tanto, una lista sangrada puede tener dos elementos hijos, pero más de dos nodos hijos. children y firstElementChild devuelven solo elementos; childNodes y firstChild incluyen texto y comentarios.

Compara el árbol con el código fuente

El análisis sintáctico convierte el marcado en el árbol y puede completarlo o repararlo. Las filas escritas directamente dentro de una <table> adquieren un padre <tbody>. También pueden añadirse los elementos <html>, <head> o <body> que falten. Selecciona a partir del árbol real, incluidos estos elementos añadidos por el analizador.

Los cambios de un script afectan al DOM actual del navegador, no al archivo HTML del servidor. «Ver código fuente de la página» muestra el HTML original, mientras que el panel Elementos de las herramientas de desarrollo muestra el árbol actual. Al recargar se construye un DOM nuevo; una edición por sí sola no guarda los datos que la sustentan.

Inspecciona un objeto

Haz clic derecho en un elemento y elige «Inspeccionar». Introduce $0 en la consola para referirte al elemento seleccionado. console.log($0) lo presenta como marcado; console.dir($0) muestra sus propiedades. Despliega una lista sangrada para ver los nodos de espacios en blanco junto a sus elementos de lista.

Las propiedades del árbol permiten que un script llegue al contenido cercano desde un elemento que ya tiene. Elige si esa ruta debe incluir texto y comentarios o solo elementos.

Elige nodos o elementos

Las propiedades de nodos incluyen parentNode, childNodes, firstChild, lastChild, previousSibling y nextSibling. Sus equivalentes para elementos son parentElement, children, firstElementChild, lastElementChild, previousElementSibling y nextElementSibling. children es una HTMLCollection; childNodes es una NodeList.

<ul id="tasks">
  <li>Buy milk</li>
  <li>Call Sam</li>
</ul>

Aquí tasks.childNodes.length es 5: dos elementos y tres secuencias de espacios en blanco. tasks.children.length es 2. tasks.firstChild es texto con espacios en blanco, mientras que tasks.firstElementChild.textContent es «Buy milk». Los índices empiezan en 0, por lo que tasks.children[1] es el segundo elemento de la lista.

Sigue una ruta corta

const tasks = document.querySelector("#tasks");
const first = tasks.firstElementChild;
const second = first.nextElementSibling;
console.log(second.textContent);
console.log(second.parentElement === tasks);

La salida es «Call Sam» y después true. tasks.lastElementChild llega directamente al mismo elemento, igual que tasks.children[tasks.children.length - 1].

Maneja un nodo relacionado ausente

El nextElementSibling del último elemento es null. Un elemento sin hijos de tipo elemento tiene firstElementChild === null y una colección children vacía. El parentNode del elemento HTML raíz es el documento, pero su parentElement es null.

Leer una propiedad de null lanza un error de tipo. Comprueba primero o usa second.nextElementSibling?.textContent, que da undefined cuando no existe un elemento siguiente.

Encuentra un elemento contenedor

closest(selector) comprueba el elemento actual y después sus antecesores, y devuelve la coincidencia más cercana o null. Un botón dentro de <li class="task" data-id="7"> puede usar button.closest(".task"); el dataset.id del elemento coincidente es «7». En cambio, matches(selector) comprueba solo el elemento actual y devuelve un booleano.

Las rutas largas como el.parentElement.parentElement.nextElementSibling dependen del anidamiento exacto. Añadir un contenedor cambia su significado. Usa selectores para regiones con nombre, navegación corta para relaciones estables y closest() para un elemento contenedor.

Un selector convierte la descripción de un elemento en una referencia a un objeto. Empieza con la búsqueda más acotada que identifique el elemento que necesitas y comprueba que se haya encontrado antes de modificarlo.

Busca con un selector CSS o un id

document.querySelector(selector) devuelve el primer elemento coincidente en el orden del documento. Acepta selectores CSS conocidos: "h1", ".price", "#cart", "nav a" o 'input[type="email"]'. Si no hay coincidencias, devuelve null.

document.getElementById("cart") busca directamente un id. Su argumento es el id sin más. getElementById("#cart") busca un id que realmente incluye la almohadilla, mientras que querySelector("cart") busca una etiqueta <cart>. Usa querySelector("#cart") para el selector de id.

Los id deben ser únicos. Si el marcado copiado asigna el mismo id a dos elementos, estas búsquedas devuelven el primero en el orden del documento. Corrige el marcado duplicado en lugar de esperar que una búsqueda por id llegue a la segunda copia.

Busca dentro de un contenedor

Supón que varias tarjetas tienen un elemento con la clase name. Selecciona primero la tarjeta de perfil y después busca entre sus descendientes:

const card = document.querySelector("#profile");
if (card) {
  const name = card.querySelector(".name");
  if (name) name.textContent = "Maya";
}

La búsqueda interna se limita a la tarjeta de perfil, por lo que un .name anterior en otra parte no interfiere. El propio contenedor no es candidato en su búsqueda con querySelector(). Los elementos ordinarios admiten este método, pero getElementById() pertenece a document.

Distingue entre la ausencia de coincidencias y un selector no válido

Una búsqueda válida sin coincidencias da null. Intentar asignar un valor a null.textContent lanza un error de tipo, así que comprueba el contenido opcional:

const banner = document.querySelector(".banner");
if (banner) banner.textContent = "Sale ends Friday";

Un selector CSS no válido lanza un error de sintaxis antes de que pueda haber un resultado. Para <p id="1st">, querySelector("#1st") no es válido porque el dígito necesita una secuencia de escape en ese selector CSS de id. getElementById("1st") usa un id literal y funciona directamente.

Ejecuta el código después de que exista el marcado necesario

Un script externo clásico en <head> se ejecuta antes de que el navegador haya analizado el cuerpo. Por tanto, una búsqueda de un párrafo posterior devuelve null aunque el HTML lo contenga. Usa <script src="app.js" defer></script> para ejecutarlo después del análisis, usa un script de módulo o coloca el script justo antes de </body>. Los scripts de módulo se difieren de forma predeterminada. El atributo defer no tiene efecto en un script clásico integrado en HTML.

En una página HTML que comienza con <!DOCTYPE html>, los selectores de id y clase distinguen entre mayúsculas y minúsculas: .Price no coincide con class="price". Los selectores de etiquetas HTML no las distinguen, por lo que "LI" y "li" coinciden con elementos de lista. Cuando una búsqueda falle, comprueba la escritura, la sintaxis del selector, el contenedor de búsqueda y el momento de ejecución del script.

Usa querySelectorAll() cuando corresponda realizar la misma operación en varios elementos. Su resultado es una colección, así que debes decidir cómo recorrerla y si necesitas una instantánea o una vista dinámica.

Lee y recorre una NodeList

document.querySelectorAll(".note") devuelve una NodeList de elementos coincidentes en el orden del documento. Si no hay coincidencias, devuelve una NodeList vacía de longitud 0. La propia colección sigue siendo verdadera en contexto booleano; if (notes) no indica si contiene elementos. Comprueba notes.length.

Una NodeList admite índices, length, forEach() y for...of, pero no es un array y no tiene map(), filter() ni reduce(). Conviértela cuando necesites esos métodos:

const weights = Array.from(document.querySelectorAll(".weight"))
  .map(el => Number(el.textContent));
const total = weights.reduce((sum, weight) => sum + weight, 0);

Para elementos que contienen «4.5», «12» y «3.25», el array es [4.5, 12, 3.25] y el total es 19,75 kg. La conversión a números es importante porque los valores de texto son cadenas.

Una colección no es un elemento combinado. Asignar un valor a notes.textContent no modifica ninguna nota, y notes.classList.add("saved") lanza un error porque la NodeList no tiene classList. Aplica el cambio a cada elemento:

const notes = document.querySelectorAll(".note");
notes.forEach(note => note.classList.add("saved"));

Compara resultados estáticos y dinámicos

La NodeList de querySelectorAll() es estática: sus miembros quedan fijados cuando se ejecuta la búsqueda. Los elementos a los que se refiere siguen siendo los objetos reales, por lo que su texto o sus clases pueden cambiar.

getElementsByClassName("note") y getElementsByTagName("li") devuelven una HTMLCollection dinámica. children también es dinámica. Estas colecciones actualizan sus miembros cuando cambia el DOM. Admiten índices y for...of, pero no forEach().

En una lista con tres elementos .item, guarda tanto list.getElementsByClassName("item") como list.querySelectorAll(".item"). Añade un cuarto elemento coincidente. La colección dinámica tiene ahora longitud 4; la instantánea sigue teniendo longitud 3.

Evita el problema de recorrer una colección dinámica que se reduce

Supón que cuatro elementos pertenecen a una colección dinámica llamada live:

for (let i = 0; i < live.length; i++) {
  live[i].classList.remove("item");
}

Eliminar la primera clase saca ese elemento de la colección. El siguiente elemento se desplaza al índice 0, pero el bucle avanza al índice 1 y lo omite. Solo dos de los cuatro pierden la clase. Recorre Array.from(live) o una instantánea de querySelectorAll() cuando cambies los miembros de la colección.

Comprueba los espacios en los selectores

.task.done significa un elemento con ambas clases. .task .done significa un descendiente .done dentro de un .task. Para <li class="task done">, cuenta los elementos terminados con document.querySelectorAll(".task.done").length. Una coma combina selectores: "h2, h3" devuelve las coincidencias en el orden del documento, no todos los encabezados de un tipo seguidos por los del otro.

El texto y el HTML son entradas diferentes. El texto sin formato debe aparecer como caracteres; el HTML describe elementos que el navegador debe construir. Elegir entre ellos afecta tanto a la estructura de la página como a la posibilidad de que el texto externo ejecute código no deseado.

Lee y sustituye texto

Para <p id="msg">Total: <strong>3</strong> items</p>, msg.textContent es «Total: 3 items». Une el texto de los descendientes del elemento sin incluir sus etiquetas e incluye el texto oculto por CSS.

Asignar un valor a textContent sustituye todos los hijos por un nodo de texto. Después de msg.textContent = "Cart is empty", el hijo <strong> ya no existe dentro del párrafo. Asignar msg.textContent = "<b>Hi</b>" muestra los caracteres literales «Hi»; no crea ningún elemento en negrita.

Los valores de texto son cadenas. Si un contador contiene «4», count.textContent + 1 produce «41». Convierte antes de sumar:

count.textContent = Number(count.textContent) + 1;

La suma da el número 5 y la asignación muestra su forma textual, «5».

Lee el texto que sigue la disposición visual

En un elemento renderizado, innerText sigue el texto mostrado y la disposición visual. Omite los descendientes ocultos con display: none e incluye saltos de línea que siguen la disposición. Leerlo puede requerir un cálculo de la disposición. Usa textContent para el trabajo habitual con texto; elige innerText cuando necesites el texto renderizado. Si el propio elemento está desconectado o no se renderiza, innerText recurre a su contenido de texto.

Analiza HTML de forma deliberada

innerHTML lee el marcado dentro de un elemento. Al asignarle un valor, analiza la cadena y sustituye los hijos:

msg.innerHTML = "Total: <strong>5</strong> items";

Esto crea un nuevo elemento <strong>. Es adecuado para marcado que hayas escrito y controles. Para texto de un usuario o datos externos, usa textContent y construye la estructura con createElement().

Insertar HTML no fiable puede permitir secuencias de comandos entre sitios (XSS): el código controlado por un atacante se ejecuta en el navegador del visitante. Una imagen inyectada puede llevar un atributo onerror que ejecuta código cuando la imagen no se carga. Las etiquetas de script insertadas por innerHTML no se ejecutan, pero eso no hace seguro el resto del HTML inyectado. Bloquear solo las etiquetas de script deja abierta esta vía de ataque.

Conserva los hijos existentes al añadir contenido

list.innerHTML += "<li>New</li>" lee el marcado existente, le une una cadena y después analiza y sustituye todo el conjunto de hijos. No conserva su identidad de objeto. Una variable que contiene un hijo antiguo sigue guardando ese objeto desconectado, y los valores escritos en los campos de entrada sustituidos pueden perderse. Usa append() con nodos nuevos o insertAdjacentHTML("beforeend", markup) para marcado fiable, para añadir contenido sin volver a crear los hijos existentes.

outerHTML incluye la propia etiqueta del elemento además de su contenido. Al asignarle un valor, sustituye el propio elemento. Una referencia guardada sigue apuntando al elemento antiguo desconectado después de esa sustitución; no cambia automáticamente al nuevo.

Un atributo es un nombre y un valor en HTML. Una propiedad pertenece al objeto JavaScript que representa un elemento. Muchos atributos estándar tienen propiedades correspondientes, pero estas pueden procesar valores o indicar un tipo de estado diferente.

Trabaja con un atributo por su nombre

Para <img src="logo.png" alt="Company logo">, el navegador inicializa propiedades como img.src e img.alt. También puedes usar métodos que reciben el nombre del atributo como cadena:

• getAttribute(name) devuelve una cadena o null si el atributo no existe.
• setAttribute(name, value) añade o modifica un atributo y almacena su valor como texto.
• hasAttribute(name) indica si el atributo está presente.
• removeAttribute(name) lo elimina.

Por ejemplo, link.setAttribute("href", "https://example.com/help") cambia el destino de un enlace. Si no hay ningún atributo target, link.getAttribute("target") devuelve null, no una cadena vacía.

Lee el valor que realmente necesitas

En una página situada en https://example.com/shop/, el enlace <a href="/about"> tiene el valor de atributo «/about». Su propiedad href es la URL resuelta, «https://example.com/about». Lee el atributo cuando necesites el valor exactamente como está escrito y la propiedad cuando necesites la URL resuelta.

Las propiedades pueden tener tipos distintos de cadena. button.disabled es un booleano; input.maxLength es un número. Los métodos de atributos siguen devolviendo cadenas o null. Los nombres de propiedades también son nombres de JavaScript que distinguen entre mayúsculas y minúsculas: el.id funciona, mientras que el.ID es una propiedad diferente y normalmente es undefined.

La mayoría de los nombres son conocidos, pero hay excepciones. El atributo HTML class se expone mediante className y classList. El atributo for de una etiqueta es su propiedad htmlFor:

label.htmlFor = "email";

Esto asocia la etiqueta con el elemento cuyo id es «email».

Trata los atributos booleanos según su presencia

Los atributos booleanos incluyen disabled, checked, required y readonly. Su presencia hace que el atributo sea verdadero, aunque su texto sea «false». Este código deshabilita un botón:

button.setAttribute("disabled", "false");

Para habilitarlo, asigna button.disabled = false o llama a button.removeAttribute("disabled"). button.toggleAttribute("disabled", isBusy) añade el atributo cuando isBusy es verdadero y lo elimina cuando es falso.

Describe los controles de forma accesible

Los atributos ARIA proporcionan información a las tecnologías de apoyo. Los métodos de atributos son útiles para establecerlos, como button.setAttribute("aria-label", "Close dialog") para dar nombre a un botón que solo contiene un icono. Sus valores son cadenas; por ejemplo, un valor de estado expandido es «true» o «false».

Usa propiedades para operaciones habituales como img.src = "photo.jpg" o input.disabled = true. Usa métodos de atributos cuando el nombre esté guardado en una variable, el valor escrito exacto sea relevante o el atributo no tenga una propiedad correspondiente que estés usando.

Sigue un cambio de propiedad hasta el HTML

const field = document.createElement("input");
field.disabled = true;
console.log(field.hasAttribute("disabled"));
console.log(typeof field.disabled);
console.log(typeof field.getAttribute("disabled"));
field.removeAttribute("disabled");
console.log(field.disabled);

Las salidas son true, «boolean», «string» y false. Asignar el valor a la propiedad añade el atributo booleano. Leer ese atributo sigue devolviendo texto, aunque la propiedad sea booleana. Eliminarlo devuelve la propiedad a falso. El método y la propiedad muestran la misma presencia mediante distintos tipos de valor.

Un elemento puede llevar un id de los datos que muestra sin mostrar ese id en pantalla. Los controles de formulario también contienen valores, pero su contenido actual se lee mediante propiedades. Ambos tipos de valores suelen necesitar una conversión antes de compararlos o realizar operaciones aritméticas.

Almacena datos personalizados con atributos de datos

Los nombres HTML que empiezan por data- almacenan información para los scripts:

<li data-task-id="17" data-priority="high">Prepare slides</li>

El objeto dataset permite acceder a estos atributos. Elimina el prefijo data- y convierte cada guion seguido de una letra minúscula en esa letra mayúscula: data-task-id pasa a ser dataset.taskId. data-priority pasa a ser dataset.priority.

li.dataset.dueDate = "2026-11-05";
delete li.dataset.priority;

La asignación crea data-due-date="2026-11-05". delete elimina data-priority. Los atributos de datos también pueden seleccionarse con selectores CSS de atributo, como '[data-priority="high"]'.

Un atributo inventado como taskid="17" no es HTML válido y no crea ninguna propiedad li.taskid. getAttribute("taskid") aún puede leerlo, pero data-task-id es la forma adecuada para datos personalizados.

Convierte los valores de cadena de forma deliberada

li.dataset.taskId es «17», una cadena. li.dataset.taskId === 17 es falso porque los tipos son diferentes. Cuando los id de los datos son números, usa Number(li.dataset.taskId) === 17. Un atributo de datos ausente da undefined. Asignar li.dataset.count = 3 almacena el texto «3».

Esto ofrece un vínculo útil desde un elemento mostrado hasta su objeto:

const id = Number(li.dataset.taskId);
const task = tasks.find(task => task.id === id);

La comparación usa ahora dos números. Si ningún objeto tiene ese id, find() devuelve undefined; compruébalo antes de leer sus propiedades.

Lee el valor actual de un campo

Un <input> no contiene el valor escrito como contenido de texto. Lee input.value, que es una cadena, o asígnale un valor para cambiar el campo. input.value = "" lo vacía.

Para <input id="qty" value="1">, después de que el usuario escriba 3, qty.value es «3», pero qty.getAttribute("value") sigue siendo «1». El atributo proporciona el valor inicial; la propiedad proporciona el actual. Una casilla de verificación funciona de forma similar: su propiedad checked indica su estado booleano actual, mientras que el atributo describe el estado inicial de selección.

Usa el valor adecuado para cada control

Incluso <input type="number"> tiene un value de tipo cadena. Si la cantidad es «3» y cada elemento pesa 0,25 kg, Number(qty.value) * 0.25 da 0,75 kg. Pero qty.value + 1 da «31» porque + une una cadena y un número. Un <select> devuelve el valor de la opción seleccionada mediante select.value. Para una casilla de verificación, lee checkbox.checked, no checkbox.value, cuando necesites saber si está seleccionada.

Mantén las reglas visuales fijas en CSS y deja que JavaScript cambie las clases que seleccionan esas reglas. Una clase puede expresar estados como «terminado», «activo» o «error» sin repetir en el código los colores y las decoraciones correspondientes.

Añade y elimina nombres de clase

Supón que la hoja de estilos contiene:

.done { text-decoration: line-through; color: #888; }

item.classList.add("done") aplica el aspecto de elemento terminado. item.classList.remove("done") elimina ese estado y deja intactas las demás clases. Ambos métodos aceptan varios nombres; añadir una clase existente o eliminar una ausente no causa problemas.

contains("done") devuelve un booleano. replace("wide", "narrow") sustituye una clase presente por otra. toggle("active") añade una clase ausente o elimina una presente y devuelve si la clase queda presente.

Sigue un cambio de clase

Empieza con <div class="card">:

card.classList.add("active", "wide");
const active = card.classList.toggle("active");
const replaced = card.classList.replace("wide", "narrow");

Después de la primera línea, las clases son «card active wide». La alternancia elimina «active», por lo que active es false y las clases pasan a ser «card wide». Al sustituir «wide», quedan «card narrow» y se devuelve true. Una llamada posterior a card.classList.contains("active") da false.

Establece una clase a partir de una condición

Cuando los datos indican el estado deseado, pasa un segundo argumento:

row.classList.toggle("overdue", daysLeft < 0);

Un daysLeft negativo garantiza la presencia de la clase; en caso contrario, la clase está ausente. Repetir la llamada conserva ese estado. Una llamada simple a toggle("overdue") lo invertiría en cada ejecución.

Conserva el resto del atributo de clase

className es la cadena completa de clases. card.className = "active" sustituye todas las clases existentes, incluida «card». Usa esta asignación cuando quieras sustituir todo el conjunto; usa classList para cambiar estados individuales.

Pasa los nombres de clase sin prefijos ni signos de selector CSS. classList.add(".active") añade un nombre que contiene un punto literal; no es la clase con la que coincide .active. Un solo argumento no puede contener espacios: classList.add("big red") lanza un InvalidCharacterError. Escribe classList.add("big", "red") para dos clases.

Comprueba el CSS cuando el aspecto no cambia

Si una clase no tiene un efecto visible, inspecciona su nombre y su regla en las herramientas de desarrollo. Comprueba si falta una regla, si está mal escrita o si hay declaraciones anuladas que aparecen tachadas en el panel Estilos.

Usa clases para diseños fijos y estilos en línea para valores calculados. El objeto style lee y escribe declaraciones en línea, no todas las reglas que afectan a un elemento.

Escribe valores CSS mediante style

Los nombres CSS con guiones se convierten en propiedades JavaScript con notación camelCase. background-color pasa a ser backgroundColor, font-size pasa a ser fontSize y z-index pasa a ser zIndex:

box.style.backgroundColor = "gold";
box.style.width = "250px";

Los valores de estilo son cadenas. Incluye una unidad cuando la propiedad la requiera. En una página en modo estándar, la asignación box.style.width = 250 se ignora porque una anchura distinta de cero necesita una unidad CSS. La cadena «0» es válida para una anchura de cero.

En cambio, style.setProperty() recibe el nombre tal como se escribe en CSS:

box.style.setProperty("background-color", "gold");
document.documentElement.style.setProperty("--accent", "#0a7d5a");

La propiedad personalizada de la raíz proporciona el valor a las reglas que hacen referencia a var(--accent).

Convierte un cálculo en un valor CSS

Una barra de progreso muestra 3 tareas terminadas de un total de 8:

const percent = (3 / 8) * 100;
bar.style.width = `${percent}%`;

La proporción 0,375 se convierte en 37,5 %. El literal de plantilla proporciona «37.5%», incluida la unidad necesaria.

Elimina una sobrescritura temporal

Asigna box.style.backgroundColor = "" o llama a box.style.removeProperty("background-color") para eliminar esa declaración en línea. Entonces el navegador aplica las reglas restantes de la hoja de estilos. Usa el nombre CSS con guiones en removeProperty().

Ten cuidado con style.cssText. Asignar box.style.cssText = "color: red" sustituye todo el estilo en línea, por lo que se pierde cualquier anchura en línea existente. Cambiar una propiedad de estilo deja intactas las demás declaraciones en línea.

Lee lo que aplica el navegador

Si una hoja de estilos hace que un párrafo sea rojo, pero este no tiene un color en línea, p.style.color es una cadena vacía. Usa getComputedStyle(p).color para obtener el valor aplicado, normalmente «rgb(255, 0, 0)». Los valores calculados son de solo lectura; cambia la clase o la declaración en línea para modificar el aspecto.

Las declaraciones en línea prevalecen sobre las reglas ordinarias de la hoja de estilos, pero las declaraciones !important aplicables pueden prevalecer sobre ellas. Si un cambio de clase parece no surtir efecto, comprueba si queda una sobrescritura en línea.

Ocultar un panel lo deja en el DOM, listo para volver a aparecer con su contenido y los valores de sus campos. Eliminarlo lo saca del árbol. Elige la ocultación para un panel que volverá a aparecer y la eliminación para un elemento cuyos datos ya no existen.

Usa la propiedad hidden

panel.hidden = true añade el estado oculto ordinario. El estilo predeterminado del navegador oculta el panel sin que ocupe espacio en la disposición visual. panel.hidden = false elimina ese estado y vuelve a mostrarlo.

Una hoja de estilos puede anular este comportamiento predeterminado. Por ejemplo, .panel { display: flex; } puede hacer visible un panel oculto. Cuando el estado oculto deba prevalecer siempre, incluye:

[hidden] { display: none !important; }

Otra opción es controlar la visibilidad con una clase CSS. Con .is-hidden { display: none; }, menu.classList.toggle("is-hidden", !isOpen) añade la clase de ocultación cuando el menú está cerrado. Comprueba la hoja de estilos si la clase está presente pero prevalece otra declaración de display.

Compara tres formas de ocultar

display: none elimina el espacio del elemento en la disposición visual y lo oculta a los lectores de pantalla. visibility: hidden lo hace invisible mientras conserva su espacio y también lo oculta a los lectores de pantalla. opacity: 0 lo hace transparente, pero conserva su espacio; aún se puede hacer clic en él y sigue disponible para los lectores de pantalla. Por tanto, la transparencia por sí sola no es una buena forma de cerrar un panel que ya no debe estar disponible.

Estos efectos afectan a la visibilidad y a la disposición visual, no a la eliminación. Un campo de entrada oculto puede conservar el valor escrito en él porque el mismo objeto permanece en el árbol.

Mantén sincronizada la descripción del control

Un botón asociado a un panel desplegable debe indicar si está expandido. Establece aria-expanded en la cadena «true» cuando esté abierto y en «false» cuando esté cerrado. Basa ese valor y la visibilidad del panel en el mismo estado.

Para un panel de respuesta que comienza como <div id="answer-1" hidden>, con referencias llamadas answer y button, ejecuta:

const willOpen = answer.hidden;
answer.hidden = !willOpen;
button.setAttribute("aria-expanded", String(willOpen));

Al principio answer.hidden es true, por lo que willOpen es verdadero. La asignación establece hidden en falso y muestra el panel. El atributo del botón pasa a ser «true». Al ejecutar las mismas sentencias de nuevo, se parte de hidden en falso, se oculta el panel y se escribe «false» en el atributo.

Diagnostica una discordancia

Si el botón anuncia «expandido» mientras el panel está oculto, los dos valores no se actualizaron juntos. Si hidden es verdadero pero el panel sigue visible, inspecciona su display calculado y la regla CSS responsable. El primer problema es un estado incoherente de la aplicación; el segundo es un estilo que anula el estado oculto. Leer tanto las propiedades del DOM como el CSS aplicado te permite distinguirlos.

Un elemento nuevo no aparece solo porque lo hayas creado. Primero crea el objeto, después dale contenido y atributos y, por último, insértalo en el documento. Antes de insertarlo, puedes construir toda una estructura anidada en memoria.

Construye un elemento completo

const li = document.createElement("li");
li.textContent = "Water the plants";
li.className = "task";
li.dataset.id = "4";
document.querySelector("#tasks").append(li);

createElement("li") crea un elemento vacío. Las líneas siguientes lo rellenan; la última lo inserta como último hijo de la lista de tareas existente. Produce <li class="task" data-id="4">Water the plants</li>. La llamada necesita un nombre de etiqueta, no marcado: createElement("<li>") lanza un InvalidCharacterError. Establece las clases y los atributos después de la creación.

Para contenido anidado, crea por separado un span para el título y un botón, establece su texto y llama a li.append(title, button). Después inserta el elemento construido en la lista. document.createTextNode("…") crea texto directamente; pasar una cadena a append() también inserta un nodo de texto.

Elige una posición de inserción

• parent.append(...) añade después de los hijos existentes.
• parent.prepend(...) añade antes de los hijos existentes.
• element.before(...) añade hermanos anteriores.
• element.after(...) añade hermanos posteriores.

Cada uno acepta varios nodos y cadenas. Las cadenas se tratan como texto, por lo que list.append("<li>New</li>") no construye un elemento de lista. Los signos de menor y mayor aparecen como caracteres dentro de la lista.

Los métodos más antiguos siguen apareciendo en el código. appendChild(node) acepta un nodo y lo devuelve; no acepta una cadena. append() devuelve undefined. parent.insertBefore(newNode, referenceNode) inserta un nodo antes de un hijo existente; usar null como referencia añade al final.

Comprende la diferencia entre mover y copiar

Un nodo solo puede ocupar un lugar en el árbol. Insertar un nodo existente lo mueve. En una lista ordenada como a, b, c, list.prepend(list.lastElementChild) mueve c al principio y produce c, a, b. No deja un segundo c al final.

Esto también explica un error habitual en los bucles: crear un <li> fuera de un bucle y añadirlo repetidamente deja un solo elemento. Cada iteración modifica y mueve ese mismo objeto. Crea un elemento nuevo en cada iteración cuando la página necesite varios elementos, o haz clones separados.

Inserta marcado fiable junto al contenido existente

insertAdjacentHTML(position, markup) analiza HTML sin sustituir los hijos existentes. Sus cuatro nombres de posición son "beforebegin" y "afterend" para hermanos fuera del elemento, y "afterbegin" y "beforeend" para hijos dentro de él. list.insertAdjacentHTML("beforeend", "<li>New</li>") añade un elemento analizado. Usa esto solo para marcado fiable; el texto externo debe ir en textContent. insertAdjacentElement() e insertAdjacentText() usan los mismos nombres de posición para un elemento o texto sin formato.

Eliminar un elemento cambia el árbol, pero no borra todas las referencias a ese objeto. Sustituirlo crea una distinción similar: el objeto nuevo ocupa su lugar mientras las variables guardadas pueden seguir refiriéndose al antiguo.

Elimina un elemento o varias coincidencias

element.remove() desconecta ese elemento. parent.removeChild(child) es la forma más antigua basada en el padre y devuelve el nodo eliminado. Si una variable sigue guardando el nodo, el script puede leerlo o volver a insertarlo más adelante.

Para eliminar tareas terminadas, selecciona una colección estática y recórrela:

document.querySelectorAll(".task.done")
  .forEach(task => task.remove());

Con cinco tareas, dos marcadas como terminadas, quedan tres. Eliminar un elemento no cambia las referencias que guarda la NodeList estática, por lo que el bucle visita las dos tareas seleccionadas.

No cuentes hacia delante en una lista dinámica que se reduce

list.children es dinámica. Con seis hijos, un bucle que avanza y elimina items[i] elimina solo tres. Después de la primera eliminación, el segundo elemento se desplaza al índice 0, pero i avanza a 1. El siguiente hijo original se omite y el mismo desplazamiento se repite.

Toma una instantánea antes de eliminar todos los hijos actuales:

Array.from(list.children).forEach(item => item.remove());

Para vaciar un contenedor, list.replaceChildren() es más claro. Asignar list.textContent = "" o list.innerHTML = "" también lo vacía. Una cadena vacía no analiza contenido externo.

Sustituye un solo nodo o todo el conjunto de hijos

old.replaceWith(newElement) coloca un nodo nuevo donde estaba el antiguo. Para <p id="status">Loading…</p>, document.querySelector("#status").replaceWith(list) sustituye el mensaje por la lista. parent.replaceChildren(a, b, c) sustituye todos los hijos del padre en una sola operación y conserva el propio padre.

Esta diferencia importa para las referencias guardadas. Una variable que contiene el padre sigue siendo válida después de replaceChildren(), pero las referencias a los hijos eliminados apuntan ahora a objetos desconectados. Sustituir un contenedor con replaceWith() también desconecta ese contenedor.

Copia el elemento con o sin descendientes

element.cloneNode(true) hace una copia profunda, incluidos los descendientes y los atributos. cloneNode() o cloneNode(false) copia el elemento y sus atributos sin sus hijos. Un elemento de lista clonado sin descendientes no tiene el texto del elemento original.

Un clon comienza desconectado y debe insertarse. También hereda el id del original. Dale un id nuevo o elimina ese atributo antes de colocarlo en la misma página, para que la selección por id siga siendo fiable.

Maneja elementos opcionales

Si una búsqueda puede no encontrar nada, no llames inmediatamente a un método en su resultado. document.querySelector("#promo").remove() lanza un error cuando no existe ninguna promoción. document.querySelector("#promo")?.remove() no hace nada en ese caso. Para un contenedor necesario, un resultado ausente es una señal útil para comprobar el selector y el momento de ejecución del script antes de intentar una actualización estructural.

El renderizado consiste en convertir datos en una estructura DOM visible. Mantén el array como fuente y construye un elemento para cada objeto. Coloca los valores de datos en textContent para que sigan siendo texto incluso si contienen signos de menor y mayor.

Construye un elemento para cada objeto

Usa estos objetos de libros:

const books = [
  { id: 1, title: "Dune", pages: 412 },
  { id: 2, title: "Emma", pages: 474 },
  { id: 3, title: "Beloved", pages: 324 }
];
function createBookItem(book) {
  const li = document.createElement("li");
  li.dataset.id = String(book.id);
  li.textContent = `${book.title} (${book.pages} pages)`;
  return li;
}
const list = document.querySelector("#books");
list.append(...books.map(createBookItem));

map() llama a la función constructora una vez por libro y produce tres elementos separados. La propagación pasa esos elementos como argumentos separados a append(). La pantalla muestra «Dune (412 pages)», «Emma (474 pages)» y «Beloved (324 pages)». Los números de páginas suman 1210.

Sin propagación, list.append(books.map(createBookItem)) recibe un solo array. Convierte ese array en texto que contiene cadenas como «[object HTMLLIElement]» en lugar de insertar los elementos de lista.

El id almacenado conecta el elemento mostrado con los datos. Lee Number(li.dataset.id) antes de compararlo con los id numéricos de los libros y después usa books.find(book => book.id === id).

Maneja datos ausentes y vacíos

Si falta un campo de autor opcional, la interpolación directa muestra «undefined». Usa book.author ?? "Unknown author" como alternativa de respaldo cuando el campo sea null o undefined. La coalescencia nula deja sin cambios otros valores, incluidos 0 y una cadena vacía.

Si el array está vacío, muestra un mensaje como «Todavía no hay libros». Un resultado vacío debe indicar al usuario que actualmente no hay elementos. Al volver a renderizar, sustituye la presentación anterior para que un mensaje o unos elementos anteriores no permanezcan junto al nuevo resultado.

Comprende qué hace el método de cadena HTML

Un array fiable puede transformarse en cadenas HTML y unirse con join("") antes de asignarlo a innerHTML. La unión elimina las comas que, de otro modo, insertaría la conversión del array a cadena. Este método analiza cada valor interpolado como HTML. Usa el método de construcción de elementos cuando los valores puedan proceder de fuentes externas.

Construye una estructura de tabla válida

Para datos de tabla, construye un <tr> por objeto y un <td> por cada campo mostrado. Añade las filas al <tbody> de la tabla. Para mediciones de Oslo a 4,25 °C y El Cairo a 28,5 °C, la celda de temperatura puede usar reading.temp.toFixed(1): muestra «4.3» y «28.5». toFixed() devuelve una cadena con las posiciones decimales solicitadas. En cambio, toLocaleString() da formato según la configuración regional del usuario, que puede usar una coma decimal. Mantén el formato en el paso de presentación para que los datos numéricos sigan disponibles para los cálculos.

Construye ambas celdas antes de insertar la fila

Para un cuerpo de tabla vacío existente llamado tbody, esto renderiza las mediciones:

const readings = [{ city: "Oslo", temp: 4.25 }, { city: "Cairo", temp: 28.5 }];
const rows = readings.map(reading => {
  const row = document.createElement("tr");
  const city = document.createElement("td");
  const temperature = document.createElement("td");
  city.textContent = reading.city;
  temperature.textContent = reading.temp.toFixed(1) + " °C";
  row.append(city, temperature);
  return row;
});
tbody.replaceChildren(...rows);

Cada iteración crea una fila nueva y dos celdas nuevas. Rellenar ambas celdas antes de añadir la fila deja explícito el orden de los campos. La propagación de rows proporciona los dos nodos de fila por separado; la sustitución final también elimina las filas anteriores.

Cuando una lista contiene muchos elementos, construye el contenido nuevo fuera de la página e insértalo conjuntamente. Un fragmento de documento (DocumentFragment) agrupa nodos sin añadir un elemento contenedor. Una plantilla te permite escribir una estructura repetida en HTML y rellenar una copia nueva para cada objeto.

Reúne nodos en un fragmento

const fragment = document.createDocumentFragment();
for (const book of books) {
  fragment.append(createBookItem(book));
}
list.append(fragment);

El fragmento comienza fuera del documento. Cada elemento nuevo se convierte en su hijo. Añadir el fragmento mueve sus hijos a la lista en el orden que ya tienen; no inserta el propio fragmento como contenedor. Después de transferir 100 elementos a una lista vacía, la lista tiene 100 hijos y el fragmento tiene 0.

Este patrón agrupa la inserción y mantiene organizado el código de construcción. No garantiza una mejora concreta de velocidad. También sirve un array de nodos construidos: list.append(...items) los añade, mientras que list.replaceChildren(...items) sustituye el contenido actual por ellos.

Define marcado repetido en una plantilla

<template id="book-row">
  <li class="book"><span class="title"></span>
    (<span class="pages"></span> pages)</li>
</template>

El navegador analiza este marcado sin mostrarlo. El contenido se encuentra en un DocumentFragment separado en template.content. Una búsqueda a nivel de documento no busca dentro de ese fragmento. Selecciona la plantilla, clona su contenido y después busca dentro del clon:

const template = document.querySelector("#book-row");
const clone = template.content.cloneNode(true);
clone.querySelector(".title").textContent = book.title;
clone.querySelector(".pages").textContent = book.pages;
const item = clone.firstElementChild;
list.append(clone);

El título y el número de páginas se rellenan antes de la inserción. item guarda una referencia al nuevo <li>. Después de añadirlo, clone está vacío porque sus hijos se han movido, pero item sigue refiriéndose al elemento insertado.

Conserva la fuente reutilizable

Añade una copia cada vez. Llamar a list.append(template.content) saca los nodos originales de la plantilla. Una búsqueda posterior dentro de template.content devuelve entonces null y el siguiente intento de rellenar el título ausente lanza un error. La plantilla original debe seguir disponible para libros posteriores.

Para muchas copias, rellena cada fragmento clonado, añade esas copias a un fragmento de recopilación y después inserta la colección. Un fragmento puede recibir los hijos de otro fragmento igual que una lista.

Elige un método de construcción legible

createElement() es adecuado para una estructura pequeña o que varía considerablemente según el elemento. Una plantilla es adecuada para marcado repetido más grande que resulta más fácil editar como HTML. En ambos casos, inserta los valores externos como texto. Una cadena HTML es adecuada para marcado fiable, pero la interpolación en ella sigue provocando el análisis de HTML. Elige el método de construcción según la estructura que necesites mantener, conservando el mismo orden: crear o clonar, rellenar e insertar.

Reúne copias rellenadas para una sola sustitución

Con la plantilla de libros anterior y un array books existente:

const group = document.createDocumentFragment();
for (const book of books) {
  const copy = template.content.cloneNode(true);
  copy.querySelector(".title").textContent = book.title;
  copy.querySelector(".pages").textContent = book.pages;
  group.append(copy);
}
list.replaceChildren(group);

Cada copia rellenada transfiere su elemento a group. La última línea sustituye el contenido de la lista por esos elementos y vacía group. La plantilla original permanece intacta durante todo el proceso, por lo que la función puede repetir la construcción para un array posterior.

Usa los datos como única fuente de verdad. Una función de renderizado deriva una presentación del array actual. Llámala después de modificar el array o uno de sus objetos.

Sustituye la presentación en cada renderizado

Supón que tasks contiene cuatro objetos, exactamente uno terminado, y que la tarea 2 existe y no está terminada. Una función de renderizado puede construir elementos nuevos y un resumen:

function render() {
  const items = tasks.map(task => {
    const li = document.createElement("li");
    li.dataset.id = String(task.id);
    li.textContent = task.text;
    li.classList.toggle("done", task.done);
    return li;
  });
  list.replaceChildren(...items);
  const doneCount = tasks.filter(task => task.done).length;
  summary.textContent = `${doneCount} of ${tasks.length} done`;
}

Después de tasks.push({ id: 5, text: "Book dentist", done: false }); render();, la lista tiene cinco elementos y el resumen dice «1 of 5 done». Ejecutar tasks.find(task => task.id === 2).done = true; render(); lo cambia a «2 of 5 done».

Sustituir los hijos es esencial aquí. Si la función solo añadiera todos los elementos, llamarla dos veces duplicaría la presentación. Eliminar solo un elemento DOM también es temporal: si su objeto permanece en el array, el renderizado lo devuelve. Con tasks declarado mediante let, elimina de los datos con tasks = tasks.filter(task => task.id !== id) y vuelve a renderizar.

Deriva una vista sin perder la fuente

Para una función de renderizado que acepta un array de vista, pasa tasks.filter(task => !task.done) para mostrar solo las tareas sin terminar. Conserva el array completo para vistas posteriores y recuentos de toda la lista. Da significados claros a los resúmenes: un recuento de tareas visibles es diferente de un recuento de todas las tareas.

sort() modifica el array sobre el que se llama. Ordena una copia para mostrarla con [...tasks].sort(...), o usa tasks.toSorted(...) para obtener una copia ordenada. Proporciona un comparador: los valores numéricos necesitan (a, b) => a - b, y los títulos pueden usar (a, b) => a.title.localeCompare(b.title). La ordenación predeterminada compara las formas de cadena, por lo que [100, 25, 3].sort() permanece en ese orden; la ordenación numérica da [3, 25, 100].

Relaciona los id y analiza los datos correctamente

Un dataset.id mostrado es una cadena. Conviértelo antes de compararlo de forma estricta con id numéricos, o find() puede devolver undefined aunque exista el objeto buscado. Los datos JSON son diferentes: JSON.parse() conserva los números y booleanos de JSON con esos tipos. Los objetos analizados pueden pasar por la misma función de renderizado que los objetos escritos directamente en el código.

Conserva el estado local cuando sea necesario

Una reconstrucción completa crea elementos nuevos. Puede perder el foco y el texto escrito en campos de entrada dentro de la zona reconstruida. Para un cambio pequeño de estado que deba conservar esos objetos, actualiza los datos y después actualiza el elemento existente, por ejemplo con li.classList.toggle("done", task.done). Los datos deben seguir registrando el cambio para que un renderizado completo posterior coincida con la presentación actual.

Da entradas separadas a la vista y al resumen

Una vista filtrada puede seguir mostrando un resumen de todas las tareas:

function renderOpenTasks() {
  const visible = tasks.filter(task => !task.done);
  const nodes = visible.map(task => {
    const li = document.createElement("li");
    li.textContent = task.text;
    return li;
  });
  if (visible.length === 0) {
    const empty = document.createElement("li");
    empty.textContent = "No open tasks";
    nodes.push(empty);
  }
  list.replaceChildren(...nodes);
  const done = tasks.filter(task => task.done).length;
  summary.textContent = `${done} of ${tasks.length} done`;
}

Un array con todas las tareas terminadas muestra el mensaje de estado sin datos para esta vista, pero conserva todos los objetos para el total. Contar a partir de visible respondería a otra pregunta y podría indicar que no hay tareas terminadas simplemente porque esta vista las excluye.