Manipulación del DOM

El DOM (Document Object Model) es la representación en memoria de todo el HTML de una página. El navegador convierte cada etiqueta HTML en un objeto JavaScript con propiedades y métodos. Esto permite que JavaScript lea, modifique, cree o elimine cualquier elemento de la página en tiempo real.

document.querySelector() busca el primer elemento que coincide con un selector CSS. document.getElementById() busca por ID. Una vez que tienes el elemento, puedes cambiar su texto con textContent, su HTML con innerHTML, sus estilos con style, sus clases con classList, o sus atributos con setAttribute.

Los eventos son la forma en que JavaScript responde a las acciones del usuario. addEventListener() escucha eventos como click, input, submit, mouseover y ejecuta una función cuando ocurren. Esta combinación DOM + eventos es la base de cualquier interfaz web interactiva.

// Seleccionar elementos
const titulo = document.getElementById("titulo");
const botones = document.querySelectorAll(".btn");
const primeroBtn = document.querySelector(".btn");

// Modificar contenido
titulo.textContent = "Nuevo título";
titulo.innerHTML = "<em>Título con HTML</em>";

// Modificar estilos
titulo.style.color = "red";
titulo.style.fontSize = "24px";

// Modificar clases
titulo.classList.add("activo");
titulo.classList.remove("oculto");
titulo.classList.toggle("seleccionado");

// Crear y agregar elementos
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Párrafo creado con JS";
document.body.appendChild(nuevoParrafo);

// Eventos
const boton = document.querySelector("#miBoton");
boton.addEventListener("click", (evento) => {
  console.log("¡Clic!", evento.target);
  evento.preventDefault(); // Previene comportamiento default
});

// Evento en múltiples elementos
botones.forEach(btn => {
  btn.addEventListener("click", (e) => {
    console.log("Botón:", e.target.textContent);
  });
});