Cuando empiezas a aprender JavaScript, tarde o temprano aparece el término DOM. Aunque al principio puede parecer un concepto complicado, en realidad es lo que permite que JavaScript interactúe con una página web.
Gracias al DOM puedes cambiar textos, modificar estilos, ocultar elementos, crear botones, validar formularios o responder cuando una persona hace clic en alguna parte de la página.
En esta guía aprenderás qué es el DOM en JavaScript, cómo funciona y cómo manipularlo mediante ejemplos sencillos.
¿Qué es el DOM en JavaScript?
DOM significa Document Object Model, que en español se traduce como Modelo de Objetos del Documento.
Es una interfaz que representa el contenido de una página web como una estructura de objetos conectados entre sí. De esta manera, JavaScript puede acceder a los elementos HTML y modificarlos mientras la página está abierta.
Es importante aclarar que el DOM no forma parte del lenguaje JavaScript como tal. Es una API proporcionada por el navegador para que los scripts puedan interactuar con documentos HTML, SVG o XML.
Puedes ampliar esta explicación en la documentación oficial del DOM en MDN.
Por ejemplo, imagina este código HTML:
<body>
<h1>Bienvenido a MasterCodePro</h1>
<p>Estoy aprendiendo JavaScript.</p>
<button>Cambiar mensaje</button>
</body>El navegador interpreta ese documento y lo representa como una estructura similar a esta:
Document
└── html
└── body
├── h1
├── p
└── buttonCada elemento se convierte en un nodo dentro del árbol del DOM. Algunos nodos pueden contener otros nodos, mientras que otros representan textos, atributos o comentarios.
¿Para qué sirve el DOM?
El DOM permite crear páginas que reaccionan a las acciones del usuario sin necesidad de recargarse constantemente.
Con JavaScript y el DOM puedes:
- Cambiar el contenido de un texto.
- Modificar colores, tamaños y clases CSS.
- Mostrar u ocultar elementos.
- Crear nuevos elementos HTML.
- Eliminar elementos existentes.
- Detectar clics, movimientos del ratón o entradas de teclado.
- Validar formularios.
- Construir menús, modales, pestañas y galerías interactivas.
En otras palabras, HTML crea la estructura, CSS se encarga de la apariencia y JavaScript utiliza el DOM para añadir comportamiento e interactividad.
Antes de continuar, puedes consultar nuestro artículo sobre las características de JavaScript para entender mejor cómo se utiliza este lenguaje en el desarrollo web.
El objeto document
La mayoría de las operaciones con el DOM comienzan con el objeto document.
Este objeto representa la página web cargada actualmente y funciona como punto de entrada al árbol del DOM.
Por ejemplo:
console.log(document);Al ejecutar esta línea en la consola del navegador, podrás inspeccionar el documento HTML y los elementos que contiene.
A partir de document, JavaScript puede buscar, crear, modificar o eliminar elementos.
Cómo seleccionar elementos del DOM
Antes de cambiar un elemento, primero necesitas seleccionarlo.
JavaScript ofrece varios métodos para hacerlo.
Seleccionar un elemento por su ID
El método getElementById() permite encontrar un elemento mediante su atributo id.
HTML:
<h2 id="titulo">Curso de JavaScript</h2>JavaScript:
const titulo = document.getElementById("titulo");
console.log(titulo);En este caso, la variable titulo guarda una referencia al elemento <h2>.
Seleccionar un elemento con querySelector()
querySelector() permite utilizar selectores CSS para encontrar un elemento.
const titulo = document.querySelector("#titulo");
const boton = document.querySelector(".boton");
const parrafo = document.querySelector("p");Este método devuelve el primer elemento que coincide con el selector indicado. Si no encuentra ninguna coincidencia, devuelve null.
Puedes revisar todos sus usos en la documentación de querySelector().
Seleccionar varios elementos con querySelectorAll()
Cuando necesitas seleccionar todos los elementos que coinciden con un selector, puedes utilizar querySelectorAll().
HTML:
<p class="mensaje">Primer mensaje</p>
<p class="mensaje">Segundo mensaje</p>
<p class="mensaje">Tercer mensaje</p>JavaScript:
const mensajes = document.querySelectorAll(".mensaje");
console.log(mensajes);El resultado es una colección llamada NodeList.
Puedes recorrerla con forEach():
mensajes.forEach((mensaje) => {
console.log(mensaje.textContent);
});Cómo cambiar el contenido de un elemento
Una vez seleccionado el elemento, puedes modificar su contenido.
Utilizar textContent
textContent cambia el texto contenido dentro de un elemento.
HTML:
<h2 id="titulo">Título original</h2>JavaScript:
const titulo = document.querySelector("#titulo");
titulo.textContent = "Nuevo título creado con JavaScript";Después de ejecutar el código, el contenido del <h2> cambiará inmediatamente.
Utilizar innerHTML
innerHTML permite insertar contenido HTML dentro de un elemento.
const contenedor = document.querySelector(".contenedor");
contenedor.innerHTML = `
<h2>Nuevo contenido</h2>
<p>Este bloque fue insertado con JavaScript.</p>
`;innerHTML resulta útil cuando necesitas añadir una estructura completa. Sin embargo, no debes utilizarlo con contenido introducido directamente por usuarios sin validarlo, ya que podría introducir código no deseado.
Cuando solo necesitas modificar texto, normalmente es preferible usar textContent.
Cómo cambiar estilos con JavaScript
Puedes modificar directamente los estilos de un elemento mediante la propiedad style.
const titulo = document.querySelector("#titulo");
titulo.style.color = "blue";
titulo.style.fontSize = "32px";
titulo.style.textAlign = "center";Aunque este método funciona, para proyectos más organizados suele ser mejor crear clases en CSS y activarlas desde JavaScript.
CSS:
.destacado {
color: #2478ff;
background-color: #eef6ff;
padding: 20px;
border-radius: 12px;
}JavaScript:
const titulo = document.querySelector("#titulo");
titulo.classList.add("destacado");También puedes eliminar una clase:
titulo.classList.remove("destacado");O alternarla:
titulo.classList.toggle("destacado");toggle() es especialmente útil para crear menús desplegables, acordeones o modos oscuros.
Cómo modificar atributos HTML
El DOM también permite cambiar los atributos de los elementos.
HTML:
<img id="imagen" src="imagen-antigua.jpg" alt="Imagen antigua">JavaScript:
const imagen = document.querySelector("#imagen");
imagen.src = "imagen-nueva.jpg";
imagen.alt = "Nueva descripción de la imagen";También puedes utilizar setAttribute():
imagen.setAttribute("loading", "lazy");Y comprobar un atributo con:
const textoAlternativo = imagen.getAttribute("alt");
console.log(textoAlternativo);Cómo crear elementos con JavaScript
Para crear un elemento nuevo se utiliza document.createElement().
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este párrafo fue creado con JavaScript.";En este momento, el elemento existe en memoria, pero todavía no aparece en la página.
Para insertarlo dentro del documento puedes usar append():
const contenedor = document.querySelector(".contenedor");
contenedor.append(nuevoParrafo);createElement() devuelve un elemento nuevo que posteriormente puede recibir texto, clases, atributos o eventos.
Consulta la documentación oficial de createElement() para conocer más posibilidades.
Ejemplo completo
HTML:
<div id="lista">
<h2>Lenguajes que estoy aprendiendo</h2>
</div>
<button id="agregar">Agregar JavaScript</button>JavaScript:
const lista = document.querySelector("#lista");
const boton = document.querySelector("#agregar");
boton.addEventListener("click", () => {
const nuevoElemento = document.createElement("p");
nuevoElemento.textContent = "JavaScript";
nuevoElemento.classList.add("lenguaje");
lista.append(nuevoElemento);
});Cada vez que el usuario presione el botón se creará un nuevo párrafo dentro del contenedor.
Cómo eliminar elementos del DOM
Puedes eliminar un elemento mediante el método remove().
const mensaje = document.querySelector(".mensaje");
mensaje.remove();También puedes seleccionar un elemento específico y eliminarlo cuando el usuario haga clic:
const botonEliminar = document.querySelector("#eliminar");
const tarjeta = document.querySelector(".tarjeta");
botonEliminar.addEventListener("click", () => {
tarjeta.remove();
});Este patrón se utiliza habitualmente en listas de tareas, carritos de compra, notificaciones y paneles administrativos.
Cómo detectar eventos del DOM
Los eventos permiten ejecutar una acción cuando el usuario interactúa con la página.
Algunos eventos frecuentes son:
click: cuando se hace clic.input: cuando cambia el contenido de un campo.submit: cuando se envía un formulario.mouseover: cuando el cursor pasa sobre un elemento.keydown: cuando se presiona una tecla.scroll: cuando se desplaza la página.
La forma recomendada de registrar estos eventos es mediante addEventListener().
Puedes consultar la introducción oficial a los eventos de JavaScript para profundizar en este tema.
Ejemplo de evento click
HTML:
<button id="boton">Haz clic</button>
<p id="resultado">Todavía no has presionado el botón.</p>JavaScript:
const boton = document.querySelector("#boton");
const resultado = document.querySelector("#resultado");
boton.addEventListener("click", () => {
resultado.textContent = "Has presionado el botón correctamente.";
});Cuando se produce el clic, JavaScript modifica el texto del párrafo mediante el DOM.
Ejemplo práctico para manipular el DOM
El siguiente ejercicio reúne selección de elementos, clases, eventos y modificación de contenido.
HTML:
<section class="tarjeta">
<h2 id="titulo">Aprendiendo el DOM</h2>
<p id="descripcion">
Presiona el botón para cambiar el contenido.
</p>
<button id="cambiar">Cambiar contenido</button>
</section>CSS:
.tarjeta {
max-width: 500px;
margin: 40px auto;
padding: 30px;
border: 1px solid #dddddd;
border-radius: 16px;
text-align: center;
}
.tarjeta-activa {
background-color: #eef6ff;
border-color: #2478ff;
}
button {
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}JavaScript:
const tarjeta = document.querySelector(".tarjeta");
const titulo = document.querySelector("#titulo");
const descripcion = document.querySelector("#descripcion");
const boton = document.querySelector("#cambiar");
boton.addEventListener("click", () => {
titulo.textContent = "¡El DOM ha sido modificado!";
descripcion.textContent =
"JavaScript cambió el texto y los estilos sin recargar la página.";
tarjeta.classList.toggle("tarjeta-activa");
});Cuando el usuario hace clic, JavaScript:
- Detecta el evento.
- Cambia el título.
- Modifica la descripción.
- Añade o elimina una clase CSS.
Este es el principio que se utiliza para construir componentes más avanzados, como menús, ventanas emergentes, pestañas, filtros y formularios interactivos.
Errores frecuentes al manipular el DOM
Ejecutar JavaScript antes de cargar el HTML
Si el script se ejecuta antes de que exista el elemento, querySelector() puede devolver null.
Una solución es colocar el archivo JavaScript antes de cerrar </body>:
<script src="script.js"></script>
</body>Otra opción es utilizar el atributo defer:
<script src="script.js" defer></script>defer permite que el navegador continúe procesando el HTML y ejecute el archivo cuando el documento ya ha sido analizado.
Escribir incorrectamente el selector
Este selector busca una clase:
document.querySelector(".boton");Este busca un ID:
document.querySelector("#boton");Y este busca una etiqueta HTML:
document.querySelector("button");Olvidar el punto o la almohadilla puede hacer que JavaScript no encuentre el elemento.
Intentar modificar un elemento inexistente
El siguiente código genera un error si no existe .mensaje:
const mensaje = document.querySelector(".mensaje");
mensaje.textContent = "Nuevo mensaje";Puedes comprobar primero que el elemento existe:
const mensaje = document.querySelector(".mensaje");
if (mensaje) {
mensaje.textContent = "Nuevo mensaje";
}Esta comprobación evita errores y hace que el código sea más resistente.
Abusar de los estilos en línea
Modificar cada propiedad con element.style puede terminar produciendo código difícil de mantener.
En lugar de esto:
elemento.style.color = "white";
elemento.style.backgroundColor = "blue";
elemento.style.padding = "20px";Puedes crear una clase CSS:
.activo {
color: white;
background-color: blue;
padding: 20px;
}Y activarla con JavaScript:
elemento.classList.add("activo");Diferencia entre HTML y DOM
HTML y DOM están relacionados, pero no son exactamente lo mismo.
HTML es el código que escribes en el archivo:
<h1>Hola mundo</h1>El DOM es la representación de ese documento que el navegador crea en memoria. JavaScript trabaja principalmente con esa representación.
Esto significa que puedes modificar el DOM sin cambiar directamente el archivo HTML original:
document.querySelector("h1").textContent = "Hola desde JavaScript";El cambio se mostrará en la pantalla, aunque el contenido inicial del archivo continúe siendo <h1>Hola mundo</h1>.
¿Por qué es importante aprender a manipular el DOM?
Aprender el DOM es uno de los pasos más importantes para avanzar en JavaScript.
Cuando dominas su manipulación puedes crear:
- Menús responsive.
- Modales y ventanas emergentes.
- Acordeones.
- Formularios con validación.
- Galerías de imágenes.
- Listas de tareas.
- Filtros de productos.
- Contadores.
- Pestañas dinámicas.
- Aplicaciones web interactivas.
También te ayudará a comprender mejor cómo funcionan herramientas modernas como React, Vue o Angular, aunque estas utilicen sus propios sistemas para gestionar y actualizar la interfaz.
Para seguir practicando, visita nuestra sección de JavaScript en MasterCodePro o realiza alguno de nuestros ejercicios de programación.
Preguntas frecuentes sobre el DOM
¿Qué significa DOM?
DOM significa Document Object Model o Modelo de Objetos del Documento. Es la representación en forma de árbol que permite acceder y modificar los elementos de una página web.
¿El DOM forma parte de JavaScript?
No exactamente. El DOM es una API del navegador que JavaScript puede utilizar para interactuar con documentos HTML, SVG o XML.
¿Cuál es la mejor forma de seleccionar elementos?
Para la mayoría de los proyectos modernos, querySelector() y querySelectorAll() son opciones prácticas porque permiten utilizar selectores CSS.
¿Cómo puedo cambiar un texto con JavaScript?
Primero selecciona el elemento y después modifica su propiedad textContent:
const titulo = document.querySelector("h1");
titulo.textContent = "Nuevo título";¿Cómo puedo crear un elemento nuevo?
Utiliza document.createElement() y después insértalo con append():
const parrafo = document.createElement("p");
parrafo.textContent = "Nuevo párrafo";
document.body.append(parrafo);¿Cómo detectar un clic en JavaScript?
Puedes utilizar addEventListener():
const boton = document.querySelector("button");
boton.addEventListener("click", () => {
console.log("El usuario hizo clic");
});Para finalizar
El DOM es el puente que conecta JavaScript con el contenido de una página web.
Gracias a él puedes seleccionar elementos, cambiar textos, modificar clases, crear contenido, eliminar componentes y responder a las acciones del usuario.
No necesitas memorizar todos sus métodos desde el principio. Lo más importante es comprender el proceso básico:
- Seleccionar el elemento.
- Escuchar una acción cuando sea necesario.
- Modificar su contenido, atributos o estilos.
Dominar estas tres ideas te permitirá transformar páginas HTML estáticas en experiencias interactivas y comenzar a desarrollar proyectos JavaScript más completos.
Como referencia técnica avanzada, también puedes consultar el estándar oficial del DOM mantenido por WHATWG.
