Ya sabes qué es JavaScript. Sabes que hace que las páginas web sean interactivas. Pero ahora llega la pregunta que todo principiante se hace en algún momento: "¿Cómo hace JavaScript para cambiar cosas en la página web si son archivos completamente distintos?"
La respuesta tiene nombre: el DOM.
El DOM es el puente entre tu código JavaScript y los elementos que el usuario ve en pantalla. Una vez que lo entiendes, el desarrollo web empieza a tener sentido de verdad. Y manipularlo es más fácil de lo que parece.
Vamos por partes.
¿Qué es el DOM?
DOM son las siglas de Document Object Model, que en español significa Modelo de Objetos del Documento. Es una representación estructurada de tu página HTML que el navegador construye en memoria cuando carga la página.
Dicho de forma más sencilla: cuando el navegador lee tu archivo HTML, no lo guarda como texto plano. Lo convierte en una estructura de objetos organizados jerárquicamente, como un árbol genealógico, donde cada etiqueta HTML se convierte en un nodo de ese árbol.
Y ese árbol es el DOM. JavaScript puede leerlo, modificarlo, agregar ramas, eliminar hojas... todo en tiempo real, sin recargar la página.
Imagina que tu página HTML es una receta escrita en papel. El DOM es esa misma receta digitalizada, organizada en una base de datos que JavaScript puede consultar y editar al instante. Si cambias un ingrediente en la base de datos, el plato en pantalla cambia inmediatamente. Eso es exactamente lo que pasa cuando manipulas el DOM.
¿Cómo luce el DOM por dentro?
Toma este HTML sencillo:
<html>
<body>
<h1 id="titulo">Hola, mundo</h1>
<p class="descripcion">Bienvenido a mi página.</p>
<button id="btn">Haz clic</button>
</body>
</html>El navegador convierte ese código en un árbol de nodos que luce así:
document
└── html
└── body
├── h1 (id="titulo")
│ └── "Hola, mundo"
├── p (class="descripcion")
│ └── "Bienvenido a mi página."
└── button (id="btn")
└── "Haz clic"Cada elemento HTML es un nodo. El texto dentro de cada elemento también es un nodo. Los atributos como id o class son propiedades de esos nodos. JavaScript accede a cualquiera de ellos a través del objeto especial document, que representa al documento completo.
💡 Truco para ver el DOM en acción: Abre tu navegador, haz clic derecho en cualquier página web y selecciona "Inspeccionar". La pestaña "Elements" te muestra el DOM en tiempo real. Si modificas algo ahí, verás el cambio inmediatamente en la página. Eso mismo es lo que hace JavaScript con código.
Paso 1: Seleccionar elementos del DOM
Antes de poder modificar algo, tienes que decirle a JavaScript qué elemento quieres tocar. A esto se le llama seleccionar un elemento. Es como apuntar con el dedo a algo en la pantalla y decir "ese, ese de ahí".
Hay cuatro formas principales de hacerlo, y todas empiezan con document:
1. Por ID — el más preciso
let titulo = document.getElementById("titulo");
console.log(titulo); // <h1 id="titulo">Hola, mundo</h1>Devuelve exactamente un elemento, porque los IDs deben ser únicos en cada página. Si el elemento no existe, devuelve null.
2. Por selector CSS — el más flexible
// Selecciona el primer elemento que coincida
let descripcion = document.querySelector(".descripcion");
// Selecciona TODOS los elementos que coincidan
let todosLosParrafos = document.querySelectorAll("p");querySelector() y querySelectorAll() usan exactamente la misma sintaxis que CSS. Si sabes CSS, ya sabes cómo usarlos. Son los métodos más modernos y recomendados hoy en día.
// Ejemplos de selectores válidos:
document.querySelector("#titulo") // por ID
document.querySelector(".descripcion") // por clase
document.querySelector("h1") // por etiqueta
document.querySelector("nav a.activo") // combinado, como en CSS3. Por clase
let elementos = document.getElementsByClassName("descripcion");
// Devuelve una colección HTML (similar a un array)4. Por etiqueta
let parrafos = document.getElementsByTagName("p");
// Devuelve todos los <p> de la páginaEn la práctica moderna, querySelector y querySelectorAll cubren casi todos los casos. Son los que más vas a usar.
Paso 2: Modificar elementos del DOM
Una vez que tienes un elemento seleccionado, puedes hacer casi cualquier cosa con él. Cambiar su texto, su HTML, sus estilos, sus clases... todo.
Cambiar el texto de un elemento
let titulo = document.querySelector("#titulo");
titulo.textContent = "¡El DOM es increíble!";
// El h1 ahora muestra: ¡El DOM es increíble!Usa textContent cuando solo quieras cambiar el texto. Nunca interpreta HTML, lo que lo hace más seguro.
Cambiar el HTML interno de un elemento
let descripcion = document.querySelector(".descripcion");
descripcion.innerHTML = "Aprende <strong>JavaScript</strong> desde cero.";
// El párrafo ahora muestra "Aprende JavaScript desde cero" con negritainnerHTML sí interpreta HTML. Útil cuando quieres insertar etiquetas, pero úsalo con cuidado si el contenido viene del usuario (puede ser un riesgo de seguridad).
Cambiar estilos CSS directamente
let titulo = document.querySelector("#titulo");
titulo.style.color = "blue";
titulo.style.fontSize = "3em";
titulo.style.backgroundColor = "#f0f0f0";
titulo.style.padding = "16px";⚠️ Nota: Las propiedades CSS con guion se escriben en camelCase en JavaScript. font-size se convierte en fontSize, background-color en backgroundColor, etc.
Añadir, quitar y alternar clases CSS
Modificar estilos directamente con .style funciona, pero no es la práctica más recomendada. Lo ideal es tener las clases definidas en tu CSS y simplemente activarlas o desactivarlas con JavaScript.
let boton = document.querySelector("#btn");
boton.classList.add("activo"); // añade la clase "activo"
boton.classList.remove("activo"); // elimina la clase "activo"
boton.classList.toggle("activo"); // si la tiene, la quita; si no, la añade
boton.classList.contains("activo"); // devuelve true o falseclassList.toggle() es uno de los métodos más útiles del DOM. Con una sola línea puedes implementar menús que abren y cierran, botones que se activan y desactivan, temas claros y oscuros...
Cambiar atributos HTML
let imagen = document.querySelector("img");
imagen.setAttribute("src", "nueva-foto.jpg");
imagen.setAttribute("alt", "Mi nueva foto");
// También puedes leer un atributo
let urlActual = imagen.getAttribute("src");
console.log(urlActual); // "nueva-foto.jpg"Paso 3: Crear y eliminar elementos
Hasta ahora hemos modificado elementos que ya existían en el HTML. Pero el DOM también te permite crear elementos desde cero e insertarlos donde quieras. O eliminar los que ya no necesitas.
Crear un nuevo elemento
// 1. Crear el elemento
let nuevoParrafo = document.createElement("p");
// 2. Darle contenido
nuevoParrafo.textContent = "Soy un párrafo creado con JavaScript.";
nuevoParrafo.classList.add("nuevo");
// 3. Insertarlo en la página
document.body.appendChild(nuevoParrafo);
// Se añade al final del bodyInsertar en una posición específica
let lista = document.querySelector("ul");
let nuevoItem = document.createElement("li");
nuevoItem.textContent = "Nuevo elemento de la lista";
// Al final de la lista
lista.appendChild(nuevoItem);
// Al principio de la lista
lista.prepend(nuevoItem);
// Antes de un elemento específico
let primerItem = lista.querySelector("li");
lista.insertBefore(nuevoItem, primerItem);Eliminar un elemento
let elementoAEliminar = document.querySelector(".viejo");
elementoAEliminar.remove(); // ¡Así de simple en JavaScript moderno!Paso 4: Eventos — hacer que la página reaccione
Seleccionar y modificar elementos es poderoso. Pero la verdadera magia del DOM ocurre cuando combinas eso con eventos: acciones que el usuario realiza (hacer clic, mover el mouse, escribir, hacer scroll) a las que JavaScript puede responder.
Para escuchar un evento, usas addEventListener(). Recibe dos argumentos: el nombre del evento y la función que se ejecuta cuando ocurre.
El evento más usado: click
let boton = document.querySelector("#btn");
boton.addEventListener("click", function() {
alert("¡Hiciste clic en el botón!");
});Ejemplo real: contador de clics
let boton = document.querySelector("#btn");
let contador = 0;
boton.addEventListener("click", function() {
contador++;
boton.textContent = `Le diste clic ${contador} veces`;
});Eventos de teclado
let campo = document.querySelector("input");
campo.addEventListener("keyup", function(evento) {
console.log("Tecla presionada:", evento.key);
console.log("Valor actual:", campo.value);
});Eventos de mouse
let tarjeta = document.querySelector(".tarjeta");
tarjeta.addEventListener("mouseenter", function() {
tarjeta.style.transform = "scale(1.05)";
tarjeta.style.transition = "transform 0.2s";
});
tarjeta.addEventListener("mouseleave", function() {
tarjeta.style.transform = "scale(1)";
});Los eventos más comunes que debes conocer
click— clic con el mousedblclick— doble clicmouseenter/mouseleave— el mouse entra o sale de un elementokeydown/keyup— tecla presionada o soltadainput— el valor de un campo cambiasubmit— un formulario se envíascroll— el usuario hace scrollload— la página termina de cargarDOMContentLoaded— el DOM está listo (antes de que carguen imágenes y estilos)
Ejemplo completo: lista de tareas interactiva
Vamos a juntar todo lo que aprendiste en un mini proyecto real: una lista de tareas donde puedes agregar y eliminar ítems dinámicamente.
HTML:
<div id="app">
<h2>Mi lista de tareas</h2>
<div class="input-grupo">
<input type="text" id="nuevaTarea" placeholder="Escribe una tarea...">
<button id="btnAgregar">Agregar</button>
</div>
<ul id="listaTareas"></ul>
</div>JavaScript:
let input = document.querySelector("#nuevaTarea");
let btnAgregar = document.querySelector("#btnAgregar");
let lista = document.querySelector("#listaTareas");
btnAgregar.addEventListener("click", function() {
let texto = input.value.trim();
// No agregar si el campo está vacío
if (texto === "") {
input.placeholder = "⚠️ Escribe algo primero...";
return;
}
// Crear el nuevo ítem
let item = document.createElement("li");
item.textContent = texto;
// Botón para eliminar
let btnEliminar = document.createElement("button");
btnEliminar.textContent = "✕";
btnEliminar.addEventListener("click", function() {
item.remove();
});
item.appendChild(btnEliminar);
lista.appendChild(item);
// Limpiar el input
input.value = "";
input.placeholder = "Escribe una tarea...";
});
// También funciona con Enter
input.addEventListener("keyup", function(e) {
if (e.key === "Enter") {
btnAgregar.click();
}
});Con menos de 35 líneas de JavaScript puro tienes una lista de tareas completamente funcional: puedes agregar ítems escribiendo y presionando Enter o el botón, y eliminarlos con la X. Todo sin recargar la página. Eso es el DOM en acción.
Errores comunes al manipular el DOM
Ejecutar JavaScript antes de que el DOM esté listo
<head>
<script>
// ❌ Error: el body no existe todavía en este punto
let boton = document.querySelector("#btn");
boton.addEventListener("click", ...);
</script>
</head>Solución: pon tu etiqueta <script> justo antes del cierre de </body>, o usa el evento DOMContentLoaded:
document.addEventListener("DOMContentLoaded", function() {
// Aquí el DOM ya está listo ✅
let boton = document.querySelector("#btn");
boton.addEventListener("click", ...);
});Olvidar que querySelector puede devolver null
// Si el elemento no existe, querySelector devuelve null
let elemento = document.querySelector("#no-existe");
elemento.textContent = "Hola"; // ❌ TypeError: Cannot set properties of nullBuena práctica: verifica que el elemento existe antes de usarlo.
let elemento = document.querySelector("#no-existe");
if (elemento) {
elemento.textContent = "Hola"; // ✅
}Confundir textContent con innerHTML
// textContent trata todo como texto plano
elemento.textContent = "<strong>Negrita</strong>";
// Muestra literalmente: <strong>Negrita</strong>
// innerHTML interpreta el HTML
elemento.innerHTML = "<strong>Negrita</strong>";
// Muestra: Negrita (en negrita de verdad)Resumen: lo que aprendiste hoy
- ✅ El DOM es la representación en memoria de tu página HTML que el navegador construye al cargar
- ✅ JavaScript accede al DOM a través del objeto
document - ✅
querySelector()yquerySelectorAll()son los métodos de selección más modernos y recomendados - ✅ Puedes cambiar texto con
textContent, HTML coninnerHTMLy estilos constyleoclassList - ✅
createElement()yappendChild()permiten crear elementos nuevos desde cero - ✅
addEventListener()hace que la página reaccione a las acciones del usuario - ✅ Siempre pon tu JavaScript después del HTML o usa
DOMContentLoaded
🧪 ¿Ya tienes claros los fundamentos de JavaScript? Ponlos a prueba
El DOM es uno de los temas que más aparece en cualquier evaluación de JavaScript. Y ahora que lo entiendes, es el momento perfecto para comprobar qué tan sólidas están tus bases con el lenguaje completo.
Tenemos un test de fundamentos de JavaScript pensado exactamente para este momento: preguntas cortas, directas y con feedback inmediato. En pocos minutos sabrás exactamente en qué nivel estás y qué temas vale la pena repasar antes de seguir avanzando.
¿Habías escuchado hablar del DOM antes? ¿Te quedó alguna duda con los eventos o la selección de elementos? Cuéntanos en los comentarios 👇 — respondemos todos. 🐍
No hay comentarios todavía. Sé el primero en compartir tu opinión.