Haciendo Páginas Interactivas

¡Ahora vamos a conectar JavaScript al HTML! Aquí es donde ocurre la magia.

¿Qué es DOM?

DOM = Document Object Model (Modelo de Objeto del Documento)

Es la representación de la página HTML como objetos JavaScript. Con el DOM, podemos:

Encontrar elementos
Modificar contenido
Cambiar estilos
Reaccionar a eventos

HTML en archivo → Navegador lee → Crea el DOM → JavaScript manipula

Seleccionando Elementos

Por ID (más específico)

html

<h1 id="titulo">¡Hola!</h1>

javascript

const titulo = document.getElementById("titulo");console.log(titulo); // <h1 id="titulo">¡Hola!</h1>

Por Clase

html

<p class="destacado">Párrafo 1</p><p class="destacado">Párrafo 2</p>

javascript

const destacados = document.getElementsByClassName("destacado");// Retorna una colección (parecido a array)

querySelector (moderno y recomendado)

javascript

// Por IDconst titulo = document.querySelector("#titulo"); // Por clase (primer elemento)const destacado = document.querySelector(".destacado"); // Por etiquetaconst parrafo = document.querySelector("p"); // Selector complejoconst item = document.querySelector("nav a.activo");

querySelectorAll (múltiples elementos)

javascript

const todosDestacados = document.querySelectorAll(".destacado"); todosDestacados.forEach(el => {    console.log(el.textContent);});

Modificando Contenido

textContent vs innerHTML

html

<p id="texto">Hola <strong>mundo</strong>!</p>

javascript

const texto = document.querySelector("#texto"); // textContent - solo el textoconsole.log(texto.textContent); // "Hola mundo!"texto.textContent = "Nuevo texto"; // innerHTML - incluye HTMLconsole.log(texto.innerHTML); // "Hola <strong>mundo</strong>!"texto.innerHTML = "Texto <em>en cursiva</em>";

Modificando Estilos

javascript

const titulo = document.querySelector("#titulo"); // Una propiedadtitulo.style.color = "blue";titulo.style.fontSize = "32px";titulo.style.backgroundColor = "#f0f0f0"; // Varias a la vez con cssTexttitulo.style.cssText = "color: red; font-size: 24px;";

Nota: propiedades CSS con guión se vuelven camelCase:

background-color → backgroundColor
font-size → fontSize

Manipulando Clases

javascript

const elemento = document.querySelector(".card"); // Agregar claseelemento.classList.add("activo"); // Quitar claseelemento.classList.remove("activo"); // Alternar (toggle)elemento.classList.toggle("activo"); // Verificar si tieneelemento.classList.contains("activo"); // true/false

Eventos

Los eventos son acciones del usuario: clics, teclas, mouse, etc.

addEventListener

javascript

const boton = document.querySelector("#miBoton"); boton.addEventListener("click", function() {    alert("¡Botón clickeado!");});

Con arrow function

javascript

boton.addEventListener("click", () => {    console.log("¡Clickeó!");});

Eventos Comunes

Evento	Cuándo se dispara
`click`	Clic del mouse
`dblclick`	Doble clic
`mouseover`	Mouse entra en elemento
`mouseout`	Mouse sale del elemento
`keydown`	Tecla presionada
`keyup`	Tecla soltada
`submit`	Formulario enviado
`input`	Valor de input cambia
`change`	Valor cambia (al salir)
`load`	Página cargó

Ejemplo: Alternar Tema

html

<button id="btnTema">🌙 Modo Oscuro</button>

javascript

const btnTema = document.querySelector("#btnTema");const body = document.body; btnTema.addEventListener("click", () => {    body.classList.toggle("dark-mode");     if (body.classList.contains("dark-mode")) {        btnTema.textContent = "☀️ Modo Claro";    } else {        btnTema.textContent = "🌙 Modo Oscuro";    }});

Creando Elementos

javascript

// Crear elementoconst nuevoParrafo = document.createElement("p");nuevoParrafo.textContent = "¡Párrafo creado con JS!";nuevoParrafo.classList.add("nuevo"); // Agregar al DOMdocument.body.appendChild(nuevoParrafo); // O a un elemento específicoconst contenedor = document.querySelector(".contenedor");contenedor.appendChild(nuevoParrafo);

Eliminando Elementos

javascript

const elemento = document.querySelector("#paraEliminar");elemento.remove();

Formularios

html

<form id="miFormulario">    <input type="text" id="nombre" placeholder="Tu nombre">    <input type="email" id="email" placeholder="Tu email">    <button type="submit">Enviar</button></form><div id="resultado"></div>

javascript

const form = document.querySelector("#miFormulario");const resultado = document.querySelector("#resultado"); form.addEventListener("submit", (e) => {    e.preventDefault(); // Impide recargar la página     const nombre = document.querySelector("#nombre").value;    const email = document.querySelector("#email").value;     resultado.innerHTML = `        <p>Nombre: ${nombre}</p>        <p>Email: ${email}</p>    `;     form.reset(); // Limpia el formulario});

Ejemplo Completo: Lista de Tareas

html

<!DOCTYPE html><html><head>    <title>Lista de Tareas</title>    <style>        .completada { text-decoration: line-through; color: gray; }    </style></head><body>    <h1>📝 Mis Tareas</h1>    <form id="formTarea">        <input type="text" id="nuevaTarea" placeholder="Nueva tarea..." required>        <button type="submit">Agregar</button>    </form>    <ul id="listaTareas"></ul>     <script src="script.js"></script></body></html>

javascript

// script.jsconst form = document.querySelector("#formTarea");const input = document.querySelector("#nuevaTarea");const lista = document.querySelector("#listaTareas"); form.addEventListener("submit", (e) => {    e.preventDefault();     const texto = input.value.trim();    if (!texto) return;     // Crear item    const li = document.createElement("li");    li.innerHTML = `        <span>${texto}</span>        <button class="completar">✓</button>        <button class="eliminar">✕</button>    `;     // Botón completar    li.querySelector(".completar").addEventListener("click", () => {        li.querySelector("span").classList.toggle("completada");    });     // Botón eliminar    li.querySelector(".eliminar").addEventListener("click", () => {        li.remove();    });     lista.appendChild(li);    input.value = "";    input.focus();});

Resumen

✅ DOM es la representación del HTML para JavaScript
✅ querySelector para seleccionar elementos
✅ .textContent y .innerHTML para modificar
✅ .style y .classList para estilos
✅ addEventListener para reaccionar a eventos
✅ createElement y appendChild para crear elementos

¡En la próxima lección, construiremos tu portafolio completo! 🚀