¿Cómo manipular el DOM con JavaScript? | JavaScript para Principiantes

Manipular el DOM significa usar JavaScript para leer y modificar el contenido, la estructura y el estilo de una página web en tiempo real.

Cuando abres una página web, el navegador convierte el HTML en una estructura de objetos llamada DOM (Document Object Model). JavaScript puede acceder a esa estructura y cambiarla sin recargar la página.

¿Qué es el DOM?

El DOM es un árbol de nodos. Cada etiqueta HTML es un nodo: <body>, <h1>, <p>, <button>, etcétera.

JavaScript usa el objeto global document para navegar y modificar ese árbol. Con document puedes encontrar cualquier elemento de la página y cambiarlo.

Cómo seleccionar elementos HTML

Antes de modificar un elemento, debes seleccionarlo. JavaScript ofrece varios métodos para esto.

Método	Qué selecciona	Ejemplo
`getElementById("id")`	Un elemento por su `id`	`document.getElementById("precio")`
`querySelector("selector")`	El primer elemento que coincida	`document.querySelector(".producto")`
`querySelectorAll("selector")`	Todos los elementos que coincidan	`document.querySelectorAll("li")`

El método más común para principiantes es getElementById. Es directo y claro.

<p id="mensaje">Bienvenido a Liverpool</p>

let parrafo = document.getElementById("mensaje");
console.log(parrafo); // muestra el elemento <p>

Cómo cambiar el contenido de un elemento

Una vez que tienes el elemento, usa la propiedad textContent para leer o cambiar su texto.

<h2 id="titulo">Catálogo FEMSA</h2>
<button onclick="cambiarTitulo()">Actualizar</button>

function cambiarTitulo() {
  let titulo = document.getElementById("titulo");
  titulo.textContent = "Catálogo actualizado 2024";
}

Al hacer clic en el botón, el texto del <h2> cambia al instante. No se recarga la página.

textContent vs innerHTML

textContent trata todo como texto plano. Es la opción segura para mostrar datos del usuario.

innerHTML interpreta etiquetas HTML dentro del texto. Úsalo solo cuando necesites insertar HTML real.

// Con textContent: muestra literalmente "<strong>Hola</strong>"
titulo.textContent = "<strong>Hola</strong>";

// Con innerHTML: muestra "Hola" en negritas
titulo.innerHTML = "<strong>Hola</strong>";

Cómo cambiar estilos CSS con JavaScript

Usa la propiedad style del elemento para modificar estilos directamente.

let caja = document.getElementById("producto");
caja.style.backgroundColor = "#e63946";
caja.style.color = "white";
caja.style.fontSize = "20px";

Nota importante: los nombres de propiedades CSS con guion se escriben en camelCase en JavaScript. Por ejemplo: background-color se convierte en backgroundColor, y font-size en fontSize.

Cómo responder a eventos del usuario

Un evento es cualquier acción del usuario: un clic, mover el mouse, escribir en un campo.

La forma más moderna de escuchar eventos es con addEventListener.

let boton = document.getElementById("miBoton");
boton.addEventListener("click", function() {
  console.log("El usuario hizo clic");
});

El primer argumento es el tipo de evento ("click", "mouseover", "keyup"). El segundo argumento es la función que se ejecuta cuando ocurre ese evento.

Ejemplo completo: botón que actualiza un precio

Este ejemplo simula una tarjeta de producto de Mercado Libre. Al hacer clic en el botón, el precio cambia y aparece una etiqueta de descuento.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Producto</title>
</head>
<body>

  <h2 id="nombreProducto">Laptop Bimbo Tech</h2>
  <p id="precioProducto">Precio: $18,500</p>
  <p id="etiqueta"></p>
  <button id="btnDescuento">Aplicar descuento del 10%</button>

  <script src="app.js"></script>
</body>
</html>

JavaScript (app.js):

let precio = 18500;

let boton = document.getElementById("btnDescuento");
let parrafoPrice = document.getElementById("precioProducto");
let etiqueta = document.getElementById("etiqueta");

boton.addEventListener("click", function() {
  let descuento = precio * 0.10;
  let precioFinal = precio - descuento;

  parrafoPrice.textContent = "Precio con descuento: $" + precioFinal.toLocaleString("es-MX");
  etiqueta.textContent = "¡Ahorraste $" + descuento.toLocaleString("es-MX") + "!";
  etiqueta.style.color = "green";
  boton.textContent = "Descuento aplicado";
  boton.style.backgroundColor = "#ccc";
});

Resultado al hacer clic:

El párrafo muestra: Precio con descuento: $16,650
La etiqueta muestra: ¡Ahorraste $1,850! en color verde
El botón cambia su texto y se desactiva visualmente

Cómo crear y agregar elementos nuevos al DOM

Además de modificar elementos existentes, puedes crear elementos nuevos y agregarlos a la página.

// 1. Crear el elemento
let nuevoParrafo = document.createElement("p");

// 2. Darle contenido
nuevoParrafo.textContent = "Nuevo producto agregado al catálogo FEMSA";

// 3. Agregarlo al DOM
document.body.appendChild(nuevoParrafo);

Este patrón se usa en listas de productos, comentarios y notificaciones dinámicas.

Ejemplo: lista de artículos en un carrito

let articulos = ["Agua Bonafont", "Pan Bimbo", "Leche Lala"];
let lista = document.getElementById("carrito");

articulos.forEach(function(articulo) {
  let item = document.createElement("li");
  item.textContent = articulo;
  lista.appendChild(item);
});

Este código toma un arreglo de productos y construye una lista HTML automáticamente. Sin tocar el HTML original.

Errores comunes

1. Ejecutar el script antes de que cargue el HTML

Si pones <script> en el <head> sin precaución, el DOM todavía no existe cuando el código se ejecuta.

// ERROR: el elemento aún no existe
let boton = document.getElementById("miBoton"); // null
boton.addEventListener("click", ...); // TypeError: Cannot read properties of null

Solución: coloca el <script> justo antes de </body>, o usa window.addEventListener("load", ...) para esperar a que cargue todo.

2. Escribir mal el id del elemento

// HTML tiene id="precioProducto"
// JavaScript busca id="PrecioProducto" (P mayúscula)
let el = document.getElementById("PrecioProducto"); // null

Los id son sensibles a mayúsculas y minúsculas. "precioProducto" y "PrecioProducto" son diferentes.

3. Usar innerHTML con datos del usuario sin validar

Si insertas con innerHTML texto que viene de un usuario externo, puedes introducir código malicioso en la página. Usa textContent cuando solo necesites mostrar texto.

4. Confundir textContent con value

Para obtener el texto que el usuario escribe en un <input>, no uses textContent. Usa la propiedad value.

// INCORRECTO para inputs
let texto = document.getElementById("campo").textContent; // siempre vacío

// CORRECTO
let texto = document.getElementById("campo").value;

Referencia rápida del DOM

Acción	Código
Seleccionar por id	`document.getElementById("id")`
Seleccionar por clase	`document.querySelector(".clase")`
Cambiar texto	`elemento.textContent = "nuevo texto"`
Cambiar HTML interno	`elemento.innerHTML = "<b>texto</b>"`
Cambiar estilo	`elemento.style.color = "red"`
Escuchar un clic	`elemento.addEventListener("click", fn)`
Crear elemento	`document.createElement("p")`
Agregar al DOM	`padre.appendChild(hijo)`
Leer valor de input	`input.value`

Lo que aprendiste en todo el curso

Este es el último módulo del curso. Repasa los bloques fundamentales que ya dominas:

Variables y tipos de datos: guardar información con let y const.
Condicionales: tomar decisiones con if, else y operadores lógicos.
Funciones: reutilizar código con bloques nombrados y con parámetros.
Ciclos: repetir tareas automáticamente con for y while.
Arreglos y objetos: organizar datos complejos como catálogos y nóminas.
DOM: conectar JavaScript con la interfaz visual de una página web.

Tus próximos pasos

Ahora que terminaste este curso, tienes una base sólida. Aquí te dejo tres acciones concretas para seguir avanzando:

Construye un proyecto pequeño. Crea una calculadora de precios con IVA para una tienda ficticia. Usa inputs, botones y muestra el resultado en pantalla con DOM.
Aprende fetch y APIs. Con fetch puedes pedir datos reales de internet y mostrarlos en tu página. Es el siguiente paso natural después del DOM.
Practica con proyectos reales mexicanos. Simula un carrito de compras estilo Mercado Libre o una nómina estilo IMSS. Usa arreglos de objetos + DOM para renderizar la lista.

Cada proyecto que construyas vale más que diez tutoriales que solo leas.