El DOM: Atrapando elementos
🎯 Objetivo
Seleccionar y manipular elementos HTML con JavaScript. querySelector, innerHTML, classList.
⚔️ Implementación
// SELECCIÓN
const titulo = document.querySelector("#titulo");
const parrafos = document.querySelectorAll("p");
const primero = document.querySelector(".ninja");
// MANIPULACIÓN DE CONTENIDO
titulo.textContent = "Nuevo título";
titulo.innerHTML = "<strong>Título en negrita</strong>";
// ATRIBUTOS
const imagen = document.querySelector("img");
imagen.src = "nueva.webp";
imagen.alt = "Nueva descripción";
imagen.setAttribute("data-id", "123");
// CLASES
const caja = document.querySelector(".caja");
caja.classList.add("activo");
caja.classList.remove("oculto");
caja.classList.toggle("destacado"); // Agrega/quita
caja.classList.contains("activo"); // true/false
// ESTILOS
caja.style.backgroundColor = "blue";
caja.style.padding = "20px";
// CREAR ELEMENTOS
const nuevoDiv = document.createElement("div");
nuevoDiv.textContent = "Soy nuevo";
nuevoDiv.classList.add("card");
document.body.appendChild(nuevoDiv);
// ELIMINAR
const eliminar = document.querySelector("#borrar");
eliminar.remove();🎯 Reto Ninja
MISIÓN DE INTERACCIÓN
🕸️ Manipulando la Red
1
Crea un archivo HTML con un <button id="btn">Clic</button> y un <p id="texto">Original</p>.
2
En tu JavaScript, selecciona ambos elementos usando document.querySelector().
3
Añade un addEventListener al botón para que, al hacer clic, el texto del párrafo cambie a "¡Jutsu activado!".
4
Cambia el color de fondo del botón usando la propiedad .style al momento del clic.
🔓 Bonus
// Insertar en posición específica
padre.insertBefore(nuevo, referencia);
padre.insertAdjacentHTML('beforeend', '<div>HTML</div>');
// Dataset
<div data-ninja-id="123"></div>
const id = div.dataset.ninjaId; // "123"✅ Checklist de Dominio
DOM DOMINADO
