Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

TUTORIAL PRÁCTICO DEL DOM EN JAVASCRIPT PARA DESARROLLADORES

January 2, 2026

Introducción al Document Object Model en JavaScript

El Document Object Model, conocido comúnmente como DOM, representa una interfaz fundamental en el desarrollo web que permite a los lenguajes de programación, particularmente JavaScript, interactuar dinámicamente con el contenido de una página HTML. Este modelo estructura el documento como un árbol de nodos, donde cada elemento HTML, atributo y texto se convierte en un objeto accesible y modificable. Gracias al DOM, los desarrolladores pueden transformar páginas estáticas en experiencias interactivas, respondiendo a acciones del usuario en tiempo real.

En el contexto actual del desarrollo web, el DOM sigue siendo esencial para aplicaciones frontend, aunque frameworks modernos como React o Vue gestionan un DOM virtual para optimizar el rendimiento. Sin embargo, comprender el DOM nativo es clave para depurar problemas, optimizar rendimiento y trabajar en proyectos que requieren manipulación directa. En este tutorial práctico, exploraremos los conceptos básicos y avanzados del DOM, con énfasis en selección y manipulación de elementos, incorporando mejores prácticas recomendadas en 2026, como el uso eficiente de selectores y el manejo de eventos delegados.

¿Qué es exactamente el DOM?

El DOM es una representación en memoria del documento HTML que el navegador crea al cargar la página. No forma parte del código HTML original hasta que el navegador lo parsea y lo convierte en una estructura jerárquica de nodos. Cada nodo puede ser un elemento (como <div> o <p>), un atributo o un texto.

Esta estructura permite que JavaScript acceda y modifique el contenido, estilo y estructura de la página sin necesidad de recargarla. Por ejemplo, al hacer clic en un botón, se puede cambiar el texto de un párrafo o agregar nuevos elementos. El DOM es una API estándar definida por el W3C y soportada por todos los navegadores modernos.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <title>Ejemplo Básico DOM</title>
    </head>
    <body>
        <h1 id="titulo">Bienvenido al DOM</h1>
        <p class="parrafo">Este es un párrafo de ejemplo.</p>
    </body>
</html>

En este HTML simple, una vez cargado, el navegador genera un árbol DOM donde <h1> y <p> son nodos hijos de <body>.

Selección de Elementos en el DOM

La base de cualquier manipulación es seleccionar los elementos deseados. JavaScript ofrece varios métodos nativos para esto, precedidos siempre por el objeto document.

El método más versátil y recomendado en la actualidad es querySelector, que acepta cualquier selector CSS y devuelve el primer elemento coincidente.

const titulo = document.querySelector("#titulo");
console.log(titulo.textContent); // Muestra: "Bienvenido al DOM"

Para seleccionar múltiples elementos, usa querySelectorAll, que retorna un NodeList iterable.

const parrafos = document.querySelectorAll(".parrafo");
parrafos.forEach((p) => console.log(p.textContent));

Otros métodos clásicos incluyen getElementById para IDs únicos:

const tituloPorId = document.getElementById("titulo");

getElementsByClassName devuelve una HTMLCollection viva:

const elementosClase = document.getElementsByClassName("parrafo");

Y getElementsByTagName para etiquetas:

const todosP = document.getElementsByTagName("p");

En 2026, se recomienda priorizar querySelector y querySelectorAll por su flexibilidad y compatibilidad con selectores complejos, como manipulación dinámica del DOM.

Manipulación de Elementos: Cambios Básicos

Una vez seleccionado un elemento, puedes modificar su contenido, atributos o estilos.

Para cambiar texto, usa textContent (seguro contra XSS) o innerHTML (permite HTML, pero con precaución).

titulo.textContent = "Título Actualizado";
titulo.innerHTML = "<strong>Título en negrita</strong>";

Modificar estilos directamente:

titulo.style.color = "blue";
titulo.style.backgroundColor = "#f0f0f0";

Mejor práctica: usar clases CSS en lugar de estilos inline para mantener separación de preocupaciones.

.titulo-azul {
    color: blue;
    background-color: #f0f0f0;
}

titulo.classList.add("titulo-azul");
titulo.classList.remove("titulo-azul");
titulo.classList.toggle("titulo-azul");

classList es la forma moderna y eficiente de manejar clases.

Creación y Adición de Nuevos Elementos

Para agregar contenido dinámico, crea elementos con createElement y agrégalos con appendChild o prepend.

const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Párrafo creado dinámicamente";
document.body.appendChild(nuevoParrafo);

Para mejor rendimiento al agregar múltiples elementos, usa DocumentFragment:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
    const item = document.createElement("li");
    item.textContent = `Elemento ${i + 1}`;
    fragment.appendChild(item);
}
document.querySelector("ul").appendChild(fragment);

Esto evita múltiples reflows del navegador, una mejora de rendimiento en DOM clave.

Eliminación y Reemplazo de Elementos

Para remover:

nuevoParrafo.remove(); // Método moderno
// O
nuevoParrafo.parentNode.removeChild(nuevoParrafo);

Reemplazar:

const reemplazo = document.createElement("span");
reemplazo.textContent = "Reemplazado";
titulo.replaceWith(reemplazo);

Manejo de Eventos en el DOM

Los eventos son acciones del usuario o del sistema (click, submit, load, etc.). Asócialos con addEventListener.

const boton = document.querySelector("#miBoton");
boton.addEventListener("click", function () {
    alert("Botón clicado");
});

Para delegación de eventos (eficiente en listas dinámicas):

document.body.addEventListener("click", function (e) {
    if (e.target.matches(".boton-dinamico")) {
        console.log("Clic en botón dinámico");
    }
});

Esto evita agregar listeners individuales y mejora el rendimiento en aplicaciones con muchos elementos.

Ejemplo Práctico: Tarjeta de Producto Interactiva

Construyamos una tarjeta de producto donde al seleccionar un color cambie la imagen, el fondo y un botón alterne estados.

Primero, estructura HTML básica:

<div class="producto">
    <div class="imagen" style="background-color: gray;"></div>
    <h3 class="etiqueta">PRODUCTO</h3>
    <h1>Título del Producto</h1>
    <div class="colores">
        <span class="color rojo" data-color="red"></span>
        <span class="color gris" data-color="gray"></span>
        <span class="color negro" data-color="black"></span>
    </div>
    <button id="agregar">Agregar al Carrito</button>
    <button class="exito" style="display: none;">¡Agregado!</button>
</div>

JavaScript para interactividad:

const imagen = document.querySelector(".imagen");
const etiqueta = document.querySelector(".etiqueta");
const botonAgregar = document.getElementById("agregar");
const botonExito = document.querySelector(".exito");
const colores = document.querySelectorAll(".color");

colores.forEach((color) => {
    color.addEventListener("click", () => {
        const nuevoColor = color.dataset.color;
        imagen.style.backgroundColor = nuevoColor;
        etiqueta.style.backgroundColor = nuevoColor;
        botonAgregar.style.backgroundColor = nuevoColor;
    });
});

botonAgregar.addEventListener("click", () => {
    botonAgregar.style.display = "none";
    botonExito.style.display = "block";
});

botonExito.addEventListener("click", () => {
    botonExito.style.display = "none";
    botonAgregar.style.display = "block";
});

Este ejemplo ilustra cambio dinámico de estilos y alternancia de visibilidad.

Mejores Prácticas Actuales para Manipulación del DOM

En 2026, el rendimiento es crítico. Evita manipulaciones frecuentes que causen reflows y repaints. Cachea selectores:

const contenedor = document.querySelector(".contenedor");
// Reusa contenedor en lugar de buscar repetidamente

Usa delegación de eventos para elementos dinámicos. Prefiere textContent sobre innerHTML por seguridad. Para actualizaciones masivas, batching con requestAnimationFrame.

requestAnimationFrame(() => {
    // Todas las actualizaciones DOM aquí
});

Observa cambios con MutationObserver para reactividad avanzada.

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => console.log(mutation));
});
observer.observe(document.body, { childList: true, subtree: true });

Estas prácticas aseguran aplicaciones fluidas incluso en dispositivos móviles.

Accede relaciones familiares:

const padre = elemento.parentNode;
const hijos = elemento.children;
const hermanoSiguiente = elemento.nextElementSibling;

Útil para traversal manual sin selectores.

Atributos y Propiedades Personalizadas

Maneja data-attributes con dataset:

elemento.dataset.miValor = "nuevo";
console.log(elemento.dataset.miValor);

Conclusiones

El DOM permanece como pilar del desarrollo web interactivo, permitiendo crear experiencias ricas y responsivas. Dominar su selección, manipulación y manejo de eventos es esencial para cualquier desarrollador JavaScript. Incorporando mejores prácticas modernas, como delegación de eventos y optimización de rendimiento, puedes construir aplicaciones eficientes y mantenibles. Experimenta con los ejemplos proporcionados para profundizar tu comprensión y aplica estos conceptos en proyectos reales para consolidar el conocimiento del Document Object Model en acción.