Manipulación del DOM: Cambiar la pantalla con JavaScript

Al finalizar este tema

Comprenderá qué es el DOM y aprenderá los métodos básicos para buscar, modificar y gestionar eventos de elementos HTML mediante JavaScript.

¿Qué es el DOM?

Cuando el navegador lee el HTML, lo convierte en una estructura de árbol. Este árbol se denomina DOM (Document Object Model).

<div id="app">
  <h1>Hello</h1>
  <p class="intro">World</p>
</div>

Este HTML se representa en el DOM de la siguiente manera:

document
  └── div#app
       ├── h1 → "Hello"
       └── p.intro → "World"

JavaScript puede leer, añadir, eliminar y modificar los nodos de este árbol, lo que provoca cambios en la pantalla.

Encontrar elementos

// Buscar por ID
const app = document.getElementById("app");

// Buscar por selector CSS (primero que coincida)
const title = document.querySelector("h1");
const intro = document.querySelector(".intro");

// Buscar todos por selector CSS
const allParagraphs = document.querySelectorAll("p");

querySelector es la opción más versátil. Permite usar los selectores CSS tal cual.

Modificación de contenido

const title = document.querySelector("h1");

// Cambiar texto
title.textContent = "Hola";

// Cambiar HTML
title.innerHTML = "Hol<em>a</em>";

// Cambiar estilo
title.style.color = "blue";
title.style.fontSize = "24px";

// Agitar/eliminar clase
title.classList.add("active");
title.classList.remove("active");
title.classList.toggle("active");

textContent contiene solo texto, mientras que innerHTML incluye también etiquetas HTML. Tenga cuidado al introducir entradas de usuario en innerHTML, ya que esto podría generar vulnerabilidades XSS.

Creación y adición de elementos

const newItem = document.createElement("li");
newItem.textContent = "Nuevo elemento";

const list = document.querySelector("ul");
list.appendChild(newItem);

Crea un nuevo elemento con createElement y añádelo a un elemento existente con appendChild.

Para añadir varios elementos a la vez, es más eficiente usar DocumentFragment:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Elemento ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment);

Manejo de eventos

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log("¡Clic realizado!");
  console.log(event.target); // Elemento clicado
});

addEventListener registra eventos. Permite detectar diversos eventos, como clics, entradas y desplazamientos.

¿Por qué aprenderlo si existe React?

Los frameworks como React o Vue no manipulan el DOM directamente. Al cambiar el estado, el framework actualiza el DOM automáticamente.

Sin embargo, es necesario conocer los principios del DOM para entender qué es lo que el framework está haciendo por ti. El conocimiento del DOM es necesario al depurar, al integrar librerías y al diagnosticar problemas de rendimiento.

Conceptos clave

El DOM es una representación del HTML como una estructura de árbol, y JavaScript manipula este árbol para cambiar la pantalla. Se utiliza querySelector para buscar elementos y addEventListener para manejar eventos. Los frameworks como React también manipulan el DOM internamente.