Manipulación del DOM

Introducción al DOM

• Qué es el DOM: Es la representación en forma de árbol del HTML. JavaScript puede leerlo y modificarlo en tiempo real.
• Relación HTML-JS: Cada elemento se convierte en un nodo accesible por selectores.
• Buenas prácticas: Esperar a que el DOM cargue (defer o DOMContentLoaded) antes de manipular.

Seleccionar y modificar elementos

javascript
Copiar
1const titulo = document.querySelector("h1");
2titulo.textContent = "Nuevo título";
3
4const caja = document.querySelector(".caja");
5caja.classList.add("activo");

• Diferencias entre getElementById, getElementsByClassName y querySelector.
• Cambiar texto, atributos y clases con textContent, setAttribute y classList.

Crear y eliminar nodos

• Crear elementos con createElement, agregar con appendChild e insertar con insertBefore.
• Eliminar con removeChild o remove.

Eventos

javascript
Copiar
1const boton = document.querySelector("#miBoton");
2boton.addEventListener("click", () => {
3  alert("Click!");
4});

• Eventos comunes: click, input, submit, focus, blur.
• Uso de preventDefault en formularios y validaciones.