Tabla de contenido

Uno de los primeros pasos para crear páginas web dinámicas es entender el DOM. Si alguna vez te has preguntado cómo hace JavaScript para cambiar el texto de un botón, mostrar un mensaje de error o agregar elementos a una lista, la respuesta es siempre la misma: a través del DOM.

¿Qué es el DOM?

DOM significa Document Object Model o Modelo de Objetos del Documento. Es básicamente una representación en forma de árbol de todo el contenido HTML de una página web. Cuando el navegador carga tu HTML, lo convierte en este árbol de objetos que JavaScript puede leer y modificar.

Imagina el siguiente HTML:

<!DOCTYPE html>
<html>
  <body>
    <h1 id="titulo">Hola mundo</h1>
    <p class="descripcion">Bienvenido a 8devmx</p>
  </body>
</html>

HTML

El DOM lo representa como un árbol donde html es el nodo raíz, body es su hijo, y h1 y p son hijos de body. Cada uno de esos nodos es un objeto que podemos manipular con JavaScript.

¿Cómo seleccionar elementos del DOM?

Para poder modificar un elemento, primero necesitas seleccionarlo. JavaScript nos da varias formas de hacerlo:

Por ID:

const titulo = document.getElementById("titulo")

JavaScript

Por clase:

const descripciones = document.getElementsByClassName("descripcion")

JavaScript

Con querySelector (recomendado):

const titulo = document.querySelector("#titulo")
const descripcion = document.querySelector(".descripcion")
const parrafo = document.querySelector("p")

JavaScript

Si quieres seleccionar múltiples elementos que comparten el mismo selector, usa querySelectorAll:

const todosLosParrafos = document.querySelectorAll("p")

JavaScript

La diferencia entre querySelector y querySelectorAll es que el primero regresa solo el primer elemento que encuentre, mientras que el segundo regresa todos como una lista.

Modificar el contenido de un elemento

Una vez que tienes seleccionado el elemento, puedes cambiar su contenido de diferentes formas:

const titulo = document.querySelector("#titulo")

// Cambia solo el texto
titulo.textContent = "Nuevo título"

// Cambia el contenido HTML (puede incluir etiquetas)
titulo.innerHTML = "<span>Nuevo título con HTML</span>"

JavaScript

Ojo con innerHTML: aunque es muy útil, hay que usarlo con cuidado cuando el contenido viene del usuario, ya que puede ser un vector de ataques de seguridad.

Modificar estilos con JavaScript

También puedes cambiar los estilos de un elemento directamente desde JavaScript:

const titulo = document.querySelector("#titulo")

titulo.style.color = "red"
titulo.style.fontSize = "32px"
titulo.style.fontWeight = "bold"

JavaScript

Pero la forma más recomendada es trabajar con clases CSS en lugar de estilos en línea:

titulo.classList.add("destacado")
titulo.classList.remove("destacado")
titulo.classList.toggle("activo")

JavaScript

Crear y eliminar elementos

Una de las funcionalidades más potentes del DOM es poder crear nuevos elementos y agregarlos a la página sin necesidad de recargarla.

Crear un elemento:

const nuevoParrafo = document.createElement("p")
nuevoParrafo.textContent = "Este párrafo fue creado con JavaScript"
document.body.appendChild(nuevoParrafo)

JavaScript

Eliminar un elemento:

const elemento = document.querySelector("#titulo")
elemento.remove()

JavaScript

Eventos en el DOM

Los eventos son acciones que ocurren en la página: un clic, un teclazo, el scroll, etc. JavaScript puede escuchar estos eventos y ejecutar código cuando ocurren.

const boton = document.querySelector("#mi-boton")

boton.addEventListener("click", function() {
  alert("¡Hiciste clic en el botón!")
})

JavaScript

También puedes usar una arrow function para hacerlo más conciso:

boton.addEventListener("click", () => {
  console.log("Clic detectado")
})

JavaScript

Los eventos más comunes que usarás son click, submit, keydown, keyup, mouseover, change e input.

Con esto ya tienes un panorama bastante claro de cómo funciona el DOM y cómo puedes manipularlo con JavaScript. Es la base de todo lo que ves interactivo en una página web y es uno de los conceptos que más vas a utilizar en tu carrera como desarrollador frontend.