<ALVESC /> ACADEMY
Manipulación del DOM
Volver a clases
Fundamentos de Programación●●Intermedio

Manipulación del DOM

120 min

Selección de elementos, cambios en contenido, estilos, creación de nodos y manejo de eventos.

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
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
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.

Ejemplos de Código

3 ejemplos

Crear y agregar nodos

javascript
1const p = document.createElement("p");
2p.textContent = "Nuevo párrafo";
3document.body.appendChild(p);

classList toggle

javascript
1const caja = document.querySelector(".caja");
2caja.classList.toggle("destacado");

Submit controlado

javascript
1const form = document.querySelector("form");
2form.addEventListener("submit", (e) => {
3  e.preventDefault();
4  console.log("Formulario enviado");
5});

Recursos

4 recursos disponibles

¡Hora de Practicar!

PrácticaIntermedio15 min🟡 IA con bitácora

Práctica guiada - Manipular DOM

Práctica

Cambiar títulos, alternar clases y crear una lista desde un array usando createElement.

Desafío de Código

EjercicioPrincipiante15 min🔴 Sin IA

Ejercicios - Eventos

Realiza las siguientes actividades

(1) Contador +/-, (2) cambiar tema claro/oscuro, (3) validar un input en tiempo real, (4) mini galéría prev/next.

Taller Práctico

TallerIntermedio30 min🟡 IA con bitácora

Proyecto de la semana

Proyecto

Aplicación de lista de tareas: crear, marcar, eliminar, filtrar tareas y almacenar en localStorage como bonus.

Reto de Lectura

Reto de LecturaPrincipiante35 min🔴 Sin IA

Reto de Lectura — El contador que se acelera

Un contador que suma 1, luego 2, luego 4, luego 8... y una app que se pone lenta con los minutos. Dos bugs clásicos del DOM que la IA comete constantemente.

Bug 1 — El contador poseído. Al primer clic suma 1. Al segundo suma 2 de golpe. Luego 4, luego 8... ¿Por qué? ¿Qué línea moverías y a dónde?

html
1<button id="abrir">Abrir panel</button>
2<div id="panel" hidden>
3  <button id="sumar">+1</button>
4  <span id="valor">0</span>
5</div>
javascript
1let contador = 0;
2const abrir = document.querySelector("#abrir");
3const panel = document.querySelector("#panel");
4
5abrir.addEventListener("click", () => {
6  panel.hidden = false;
7
8  document.querySelector("#sumar").addEventListener("click", () => {
9    contador++;
10    document.querySelector("#valor").textContent = contador;
11  });
12});

Bug 2 — La app que envejece mal. Este "reloj del panel" sigue trabajando aunque cierres el panel. Tras una hora abierta, la pestaña va lenta. ¿Qué falta y dónde lo pondrías?

javascript
1function abrirPanel() {
2  panel.hidden = false;
3  setInterval(() => {
4    panel.querySelector(".hora").textContent = new Date().toLocaleTimeString();
5  }, 1000);
6}
7
8function cerrarPanel() {
9  panel.hidden = true;
10}

Preguntas:

  1. Explica la secuencia exacta de por qué el contador suma 1, 2, 4, 8 (pista: ¿cuántos listeners hay tras abrir el panel 3 veces?).
  2. Corrige el Bug 1 de dos formas distintas.
  3. En el Bug 2: ¿qué se acumula, dónde vive aunque el panel esté oculto, y cómo lo limpias?

Clase 9 de 33 en la ruta Desarrollo web

Clase anterior

Arrays, Objetos y Loops

Siguiente clase

Git y Deploy para tu Proyecto