Manipulación del DOM

El Document Object Model (DOM) es una representación en árbol de una página HTML. JavaScript te permite leerlo y modificarlo.

Seleccionar Elementos

// Por ID
const encabezado = document.getElementById("encabezado");

// Por selector CSS (primera coincidencia)
const btn = document.querySelector(".btn-primary");

// Todas las coincidencias
const items = document.querySelectorAll("ul > li");

// Navegar
const padre = btn.parentElement;
const hijos = padre.children;
const siguiente = btn.nextElementSibling;

Modificar Elementos

// Contenido
btn.textContent = "¡Haz clic!";
btn.innerHTML = "<strong>Texto en negrita</strong>"; // Cuidado con XSS

// Atributos
btn.setAttribute("disabled", true);
btn.removeAttribute("disabled");
btn.getAttribute("data-id"); // "42"

// Clases CSS
btn.classList.add("activo");
btn.classList.remove("desactivado");
btn.classList.toggle("visible");
btn.classList.contains("activo"); // true

// Estilos
btn.style.backgroundColor = "#3b82f6";
btn.style.display = "none";

Crear e Insertar Elementos

// Crear
const li = document.createElement("li");
li.textContent = "Nuevo elemento";
li.className = "item-lista";

// Insertar
const ul = document.querySelector("ul");
ul.appendChild(li);              // Agregar al final
ul.prepend(li);                  // Agregar al inicio
ul.insertBefore(li, ul.firstChild);

// Métodos modernos de inserción
padre.insertAdjacentElement("beforeend", li);
padre.insertAdjacentHTML("beforeend", `<li>Elemento</li>`);

// Eliminar
li.remove();

Manejo de Eventos

const boton = document.querySelector("#btn-enviar");

// Agregar escuchador
function manejarClic(evento) {
  evento.preventDefault();         // Prevenir envío de formulario / navegación
  evento.stopPropagation();        // Detener propagación del evento
  console.log("¡Clic!", evento.target);
}

boton.addEventListener("click", manejarClic);

// Eliminar escuchador
boton.removeEventListener("click", manejarClic);

// Eventos comunes
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM listo");
});

window.addEventListener("resize", () => {
  console.log(window.innerWidth);
});

Delegación de Eventos

// En lugar de adjuntar listeners a cada <li>, adjuntar al padre
const lista = document.querySelector("#lista-tareas");

lista.addEventListener("click", (evento) => {
  const item = evento.target.closest("li");
  if (!item) return;

  item.classList.toggle("completado");
  console.log("Alternado:", item.textContent);
});

API Fetch

async function cargarUsuarios() {
  const response = await fetch("/api/usuarios");
  const usuarios = await response.json();

  const contenedor = document.querySelector("#usuarios");
  contenedor.innerHTML = usuarios
    .map(u => `<div class="usuario">${u.nombre}</div>`)
    .join("");
}

document.querySelector("#btn-cargar").addEventListener("click", cargarUsuarios);

Nota de seguridad: Nunca uses innerHTML con contenido generado por el usuario — siempre sanitiza primero o usa textContent para prevenir ataques XSS.