Manipulación del DOM

## Objetivos de Aprendizaje - Seleccionar elementos del DOM - Modificar elementos y atributos - Crear y eliminar elementos - Manejar eventos ## El DOM El Document Object Model (DOM) representa la estructura de un documento HTML como un árbol de objetos. ```text document ├── html │ ├── head │ └── body │ ├── header │ ├── main │ └── footer ``` ## Seleccionar Elementos ### getElementById ```javascript const elemento = document.getElementById("mi-id"); console.log(elemento.textContent); ``` ### querySelector ```javascript const primero = document.querySelector(".mi-clase"); const otro = document.querySelector("#un-id"); const elemento = document.querySelector("div.contenedor"); ``` ### querySelectorAll ```javascript const todosLosParrafos = document.querySelectorAll("p"); const botones = document.querySelectorAll(".btn"); botones.forEach(btn => { console.log(btn.textContent); }); ``` ### Otros Métodos ```javascript document.getElementsByClassName("clase") // HTMLCollection document.getElementsByTagName("div") // HTMLCollection document.getElementsByName("nombre") // NodeList ``` ## Modificar Elementos ### textContent ```javascript const parrafo = document.querySelector("p"); parrafo.textContent = "Nuevo texto"; ``` ### innerHTML ```javascript const contenedor = document.querySelector(".contenedor"); contenedor.innerHTML = "

Título

Párrafo

"; // Añadir sin reemplazar contenedor.innerHTML += "Agregado"; ``` ### Atributos ```javascript const imagen = document.querySelector("img"); // Obtener imagen.getAttribute("src"); // Establecer imagen.setAttribute("alt", "Descripción de imagen"); imagen.src = "nueva-imagen.jpg"; // Eliminar imagen.removeAttribute("alt"); ``` ### Clases CSS ```javascript const boton = document.querySelector("button"); boton.classList.add("activo"); boton.classList.remove("inactivo"); boton.classList.toggle("visible"); boton.classList.contains("activo"); // true ``` ### Estilos ```javascript const elemento = document.querySelector(".caja"); elemento.style.backgroundColor = "azul"; elemento.style.fontSize = "16px"; elemento.style.display = "flex"; ``` ## Crear Elementos ### createElement ```javascript const nuevoDiv = document.createElement("div"); nuevoDiv.textContent = "Soy un nuevo div"; nuevoDiv.className = "nueva-clase"; document.body.appendChild(nuevoDiv); ``` ### innerHTML vs createElement ```javascript // createElement (más seguro) const li = document.createElement("li"); li.textContent = "Nuevo elemento"; lista.appendChild(li); // innerHTML (más rápido pero menos seguro para entrada de usuario) lista.innerHTML += "

Nuevo elemento

"; ``` ## Eliminar Elementos ```javascript const elemento = document.querySelector(".elemento-a-eliminar"); elemento.remove(); // O elemento.parentNode.removeChild(elemento); // Eliminar todos los hijos const contenedor = document.querySelector(".contenedor"); contenedor.innerHTML = ""; ``` ## Traversing (Recorrer) ### Padres e Hijos ```javascript const elemento = document.querySelector("p"); elemento.parentNode; // Nodo padre elemento.childNodes; // Todos los nodos hijos (incluye texto) elemento.children; // Solo elementos hijos elemento.firstChild; // Primer nodo hijo elemento.lastChild; // Último nodo hijo elemento.firstElementChild; // Primer elemento hijo elemento.lastElementChild; // Último elemento hijo ``` ### Hermanos ```javascript const elemento = document.querySelector("p"); elemento.nextSibling; // Siguiente nodo hermano elemento.previousSibling; // Nodo hermano anterior elemento.nextElementSibling; // Siguiente elemento hermano elemento.previousElementSibling; // Elemento hermano anterior ``` ## Eventos ### addEventListener ```javascript const boton = document.querySelector("#mi-boton"); boton.addEventListener("click", function(event) { console.log("Botón clickeado"); console.log(event.target); }); ``` ### Tipos de Eventos Comunes | Evento | Descripción | |--------|-------------| | click | Click del mouse | | dblclick | Doble click | | mouseover | Cursor entra | | mouseout | Cursor sale | | keydown | Tecla presionada | | keyup | Tecla liberada | | submit | Formulario enviado | | change | Valor cambia | | load | Recurso cargado | | DOMContentLoaded | DOM cargado | ### Event Listener con Flecha ```javascript boton.addEventListener("click", (event) => { console.log("Clickeado:", event.target); }); ``` ### Unofficial vs Una Vez ```javascript // Unofficial (se elimina después de ejecutarse) boton.addEventListener("click", handler, { once: true }); // Remover manualmente function handler() { console.log("Ejecutado"); } boton.addEventListener("click", handler); boton.removeEventListener("click", handler); ``` ### event.preventDefault ```javascript const formulario = document.querySelector("form"); formulario.addEventListener("submit", (event) => { event.preventDefault(); // Evita el envío del formulario console.log("Formulario no enviado"); }); ``` ### event.stopPropagation ```javascript const interno = document.querySelector(".interno"); interno.addEventListener("click", (event) => { event.stopPropagation(); // Evita que el evento suba console.log("Click interno"); }); ``` ## Delegation de Eventos ```javascript // En lugar de añadir listeners a cada hijo document.querySelector(".lista").addEventListener("click", (event) => { if (event.target.classList.contains("item")) { console.log("Clickeaste:", event.target.textContent); } }); ``` ## Resumen - Seleccionar: `getElementById`, `querySelector`, `querySelectorAll` - Modificar: `textContent`, `innerHTML`, `setAttribute` - Crear: `document.createElement()` + `appendChild()` - Eliminar: `element.remove()` - Eventos: `addEventListener("tipo", handler)` - Prevenir comportamiento: `event.preventDefault()` - Delegar eventos para mejor rendimiento