Carlos Seijas
← Volver a los blogs

¿Qué es el DOM? Guía completa del Document Object Model

•Código

Compartir

X (Twitter)LinkedIn
DOMJavaScriptHTMLWeb DevelopmentFrontendManipulaciónDesarrollo
¿Qué es el DOM? Guía completa del Document Object Model

¿Te has preguntado alguna vez qué pasa cuando haces clic en un botón de una página web y algo cambia? ¿O cómo es que una página puede mostrar contenido nuevo sin recargarse? Sin el DOM, las páginas web serían tan emocionantes como un libro de texto estático.

Al terminar de leer esto, vas a entender por qué el DOM es la pieza clave que hace que la web sea interactiva y divertida. Y créeme, es más fascinante de lo que parece.

El DOM: el traductor entre HTML y JavaScript

El DOM (Document Object Model) es básicamente el intérprete que permite que JavaScript hable con tu HTML. Es como tener un traductor en tiempo real entre dos idiomas completamente diferentes.

Imagínate esto: cuando el navegador lee tu página HTML, no se queda ahí parado. La convierte automáticamente en el DOM, creando como un árbol genealógico de todos los elementos de tu página.

Lo importante es que el DOM no es JavaScript ni HTML. Es una API web que ambos pueden usar para comunicarse. Es como el Whatsapp que usan HTML y JavaScript para chatear entre ellos.

La estructura del DOM (o: cómo organizar el caos)

El árbol familiar de tu página

El DOM organiza los elementos HTML como un árbol familiar. Cada elemento HTML se convierte en un miembro de esta familia digital.

<!DOCTYPE html>
<html>
<head>
    <title>Mi página</title>
</head>
<body>
    <h1>Título principal</h1>
    <p>Un párrafo de texto</p>
</body>
</html>

En el DOM, esto se ve así:

Los diferentes tipos de "parientes"

El DOM reconoce diferentes tipos de nodos (o miembros de la familia):

Cómo encontrar elementos (la búsqueda del tesoro)

Los métodos clásicos para "pescar" elementos

JavaScript te da varias formas de encontrar elementos en el DOM:

// Buscar por ID (como buscar a alguien por cédula)
const titulo = document.getElementById('mi-titulo');

// Buscar por clase (como buscar gente con camiseta roja)
const botones = document.getElementsByClassName('btn');

// Buscar por etiqueta (como buscar todos los párrafos)
const parrafos = document.getElementsByTagName('p');

// Los selectores CSS (la navaja suiza)
const elemento = document.querySelector('.mi-clase');
const elementos = document.querySelectorAll('div.container');

Navegando por el árbol familiar

Una vez que pescas un elemento, puedes moverte por el DOM como si caminaras por un árbol genealógico:

const elemento = document.getElementById('mi-elemento');

// La familia directa
const padre = elemento.parentNode;
const hijos = elemento.childNodes;
const primerHijo = elemento.firstChild;
const ultimoHijo = elemento.lastChild;

// Los hermanos
const siguienteHermano = elemento.nextSibling;
const hermanoAnterior = elemento.previousSibling;

Manipular el DOM (donde empieza la diversión)

Cambiar contenido sobre la marcha

El DOM te permite cambiar el contenido de elementos como si fueras un mago:

// Cambiar el texto plano
elemento.textContent = 'Nuevo texto';

// Cambiar HTML completo (con superpoderes)
elemento.innerHTML = '<strong>Texto en negrita</strong>';

// Cambiar características
elemento.setAttribute('class', 'nueva-clase');
elemento.src = 'nueva-imagen.jpg';

Crear y destruir elementos (como un dios digital)

JavaScript te permite crear elementos de la nada y hacer desaparecer otros:

// Crear un elemento desde cero
const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Párrafo creado por arte de magia';

// Añadirlo al DOM (como plantarlo en el jardín)
document.body.appendChild(nuevoParrafo);

// Eliminar un elemento (desaparecerlo para siempre)
const elementoAEliminar = document.getElementById('obsoleto');
elementoAEliminar.remove();

Cambiar estilos al vuelo

El DOM te deja cambiar estilos CSS desde JavaScript:

const elemento = document.getElementById('mi-elemento');

// Cambios individuales
elemento.style.color = 'red';
elemento.style.fontSize = '20px';
elemento.style.backgroundColor = 'blue';

// Cambios masivos de una vez
elemento.style.cssText = 'color: red; font-size: 20px; background: blue;';

Eventos: cuando la página cobra vida

Escuchar lo que hace el usuario

El DOM te permite "espiar" las acciones del usuario y reaccionar a ellas:

const boton = document.getElementById('mi-boton');

// Cuando alguien hace clic
boton.addEventListener('click', function() {
    alert('¡Oye, me presionaste!');
});

// Cuando pasa el mouse por encima
boton.addEventListener('mouseenter', function() {
    this.style.backgroundColor = 'yellow';
});

// Cuando envían un formulario
const formulario = document.getElementById('mi-formulario');
formulario.addEventListener('submit', function(event) {
    event.preventDefault(); // "¡Espera, no tan rápido!"
    console.log('Formulario interceptado');
});

Los eventos que más vas a usar

Consejos de rendimiento (para que no se trabe todo)

No abuses de las consultas al DOM

Ojo con esto: acceder a el DOM es "caro" computacionalmente. Es como ir al banco: mejor hacer todo de una vez.

// Malo: ir al banco 5 veces
document.getElementById('lista').innerHTML += '<li>Item 1</li>';
document.getElementById('lista').innerHTML += '<li>Item 2</li>';

// Bueno: ir una sola vez y hacer todo
const lista = document.getElementById('lista');
lista.innerHTML += '<li>Item 1</li>';
lista.innerHTML += '<li>Item 2</li>';

Delegación de eventos (el truco de los pros)

En lugar de poner un "espía" en cada elemento, ponle uno al papá:

// Malo: un espía para cada botón
document.querySelectorAll('.boton').forEach(boton => {
    boton.addEventListener('click', manejarClick);
});

// Bueno: un espía inteligente que vigila todo
document.body.addEventListener('click', function(event) {
    if (event.target.classList.contains('boton')) {
        manejarClick(event);
    }
});

Herramientas que te van a salvar la vida

Los navegadores modernos traen herramientas geniales para trabajar con el DOM:

En mi experiencia, estas herramientas son como tener rayos X para tu página web.

Lo que realmente importa

El DOM es la columna vertebral de toda página web interactiva. Es lo que hace que cuando tú haces algo, la página reaccione. Es la diferencia entre una página muerta y una página viva.

Dominar el DOM te convierte en el director de orquesta de tus páginas web. Cada vez que ves una página que responde a tus clics, que cambia contenido sin recargar, o que hace animaciones geniales, el DOM está ahí trabajando en segundo plano.

Y la mejor parte es que una vez que le agarras el hilo, te das cuenta de que no es tan complicado. Es como aprender a manejar: al principio parece imposible, pero después lo haces sin pensar.

Comentarios

Posts relacionados