Guía práctica + snippets

Domina el DOM con ejemplos claros, accesibles y listos para usar

Esta landing resume lo esencial de una clase de DOM: cómo entender el árbol del documento, seleccionar nodos, modificar contenido, aplicar estilos dinámicos y manipular elementos.

Objetivos de la clase

  • 1. Leer y recorrer el documento como estructura de nodos.
  • 2. Elegir el selector correcto para cada caso real.
  • 3. Manipular contenido y estilos sin romper accesibilidad.
  • 4. Crear interfaces dinámicas agregando y removiendo nodos.

¿Qué es el DOM?

El Document Object Model (DOM) es una representación en memoria del HTML. El navegador transforma cada etiqueta en nodos conectados como árbol. Gracias a JavaScript podemos leerlo, modificarlo y reaccionar a eventos.

Piensa en el DOM como una maqueta viva de tu página: si cambias un nodo, cambias lo que el usuario ve.

Árbol de un HTML básico

  • <html>
    • <head>
      • <title>Mi página</title>
    • <body>
      • <h1>Hola DOM</h1>
      • <p>Primer párrafo</p>
      • <ul>
        • <li>Item 1</li>
        • <li>Item 2</li>

Seleccionar elementos en el DOM

La mejor práctica actual es priorizar querySelector y querySelectorAll por su flexibilidad con selectores CSS. Usa APIs específicas cuando necesites máxima simplicidad y tengas IDs o etiquetas bien definidas.

Comparativa de métodos de selección DOM
Método Qué devuelve Recomendación
getElementById 1 elemento o null Ideal si el id es único y estable.
getElementsByClassName HTMLCollection (viva) Útil para colecciones por clase, menos expresiva.
getElementsByTagName HTMLCollection (viva) Práctica en ejemplos simples o utilidades globales.
querySelector Primer match o null Recomendada para un único elemento.
querySelectorAll NodeList estática Recomendada para múltiples elementos.

NodeList vs Array

  • NodeList parece arreglo, pero no es un Array real.
  • NodeList tiene forEach, pero no todos los métodos de Array.
  • Para usar map, filter o reduce, conviene convertir: Array.from(nodeList).
  • querySelectorAll devuelve NodeList estática: no se actualiza sola al cambiar el DOM.
selectors.js 
12345678const title = document.getElementById("titulo");const cards = document.querySelectorAll(".card");const firstBtn = document.querySelector("button");// NodeList -> Array para map/filter/reduceconst cardsArray = Array.from(cards);const texts = cardsArray.map((el) => el.textContent);console.log(texts);

Un nodo en JS se comporta como un objeto

Toma una etiqueta HTML con atributos y mira cómo el navegador la expone en consola como un objeto del DOM con propiedades como id, className y attributes.

node-object.js 
123456789101112131415161718// HTML real en la pagina:// <button id="btn-guardar" class="btn btn-primary rounded"// data-action="save" aria-label="Guardar cambios">Guardar</button>const btn = document.querySelector("#btn-guardar");console.log(btn); // <button ...>Guardar</button>console.dir(btn); // HTMLButtonElement { ... }console.log("id:", btn.id);console.log("className:", btn.className);console.log("classList:", [...btn.classList]);console.log("data-action:", btn.getAttribute("data-action"));// Salida esperada en consola:// <button id="btn-guardar" class="btn btn-primary rounded" ...>// HTMLButtonElement { id: "btn-guardar", className: "btn btn-primary rounded", ... }// id: btn-guardar// className: btn btn-primary rounded// classList: ["btn", "btn-primary", "rounded"]// data-action: save

Leer y modificar contenido

textContent maneja solo texto plano (más seguro para la mayoría de casos). innerHTML interpreta HTML y debe usarse con cuidado cuando el contenido venga de usuario.

content.js 
1234567const msg = document.querySelector("#mensaje");// Lee o escribe texto sin interpretar etiquetasmsg.textContent = "Clase del DOM iniciada";// Inserta HTML (solo con contenido confiable)msg.innerHTML = "<strong>DOM</strong> listo para practicar";

Estilar desde el DOM

Usa element.style para cambios puntuales y classList para estilos escalables. En proyectos reales, classList suele ser más mantenible.

styles.js 
123456const card = document.querySelector(".card");card.style.backgroundColor = "#0f62fe";card.style.color = "white";card.classList.add("shadow-xl", "rounded-xl");card.classList.toggle("ring-4");

Recomendación rápida

  • 1. style: prototipos o cambios directos puntuales.
  • 2. classList.add/remove/toggle: componentes reutilizables.
  • 3. Define clases CSS/Tailwind y cambia estado desde JS.

Crear y eliminar elementos

Crear nodos dinámicamente te permite renderizar listas, alertas y tarjetas desde datos. El patrón básico es: crear, configurar, insertar y eliminar cuando corresponda.

dom-crud.js 
123456789const list = document.querySelector("#lista");const item = document.createElement("li");item.textContent = "Nuevo elemento";item.classList.add("py-1", "text-slate-800");// Inserta al final de la listalist.appendChild(item);// Elimina el elemento despuésitem.remove();