⏱️ Duración estimada: 2 horas

Sesión 19 - JavaScript: Contenido del DOM y Temporizadores

Fecha: 28 de Abril de 2026

Contenidos de la Sesión

En esta sesión se ha repasado brevemente lo trabajado en la sesión 18 y se ha profundizado en la manipulación del contenido del DOM con JavaScript: cómo leer y escribir texto o HTML en los elementos (textContent, innerHTML, innerText), cómo leer el valor de un <input> con .value, y cómo crear e insertar nuevos elementos en el DOM con document.createElement y appendChild. También se ha explorado la posibilidad de asignar múltiples listeners al mismo elemento y se ha introducido setTimeout para ejecutar código de forma diferida.

El ejercicio práctico de la sesión fue construir un temporizador de cuenta atrás, que se encuentra en la carpeta example/temporizador/. Para resolverlo se usó document.querySelector, una función helper $, parseInt, Math.floor y el patrón de setTimeout recursivo.

Los dos ejemplos de la sesión se encuentran en:

• example/session19/ — ejemplo principal con createElement, innerHTML y setTimeout
• example/temporizador/ — temporizador de cuenta atrás

1. Leer y modificar el contenido de un elemento: textContent, innerHTML e innerText

Una vez seleccionado un elemento del DOM, podemos leer o modificar su contenido con tres propiedades:

const titulo = document.getElementById("titulo");

// Leer el contenido actual
console.log(titulo.textContent); // "Hello World"
console.log(titulo.innerText); // "Hello World"
console.log(titulo.innerHTML); // "Hello World"

// Escribir texto plano
titulo.textContent = "Nuevo título";
titulo.innerText = "Nuevo título";

// Escribir HTML
titulo.innerHTML = `<span class="destacado">Nuevo título</span>`;

2. Leer el valor de un <input>: .value

La propiedad .value de un input devuelve lo que el usuario ha escrito en ese campo, siempre como string.

const elinput = document.getElementById("elinput");

console.log(elinput.value); // lo que haya escrito el usuario (como string)

3. Múltiples addEventListener en el mismo elemento

Es posible añadir más de un listener al mismo elemento para el mismo evento. Ambas funciones se ejecutarán cuando ocurra el evento:

elboton.addEventListener("click", handleClick);
elboton.addEventListener("click", handleClickExtra);

Cuando el usuario hace clic en el botón, primero se ejecuta handleClick y después handleClickExtra (en el orden en que fueron registrados).

4. Renderizado dinámico con innerHTML y template literals

Una técnica habitual para representar listas de datos en el DOM es construir un string HTML con forEach y template literals, y luego asignarlo de golpe a innerHTML:

const cuadraditos = [];

function handleClick(evento) {
  cuadraditos.push(elinput.value); // añadimos el valor al array
  pintame(cuadraditos); // re-renderizamos la lista completa
}

function pintame(parametro1) {
  let cuadraditosHTML = "";

  parametro1.forEach(function (elemento) {
    cuadraditosHTML =
      cuadraditosHTML + `<div class="cuadrado">` + elemento + `</div>`;
  });

  cuadrados.innerHTML = cuadraditosHTML;
}

Cada vez que se llama a pintame, se recorre el array completo y se reconstruye el HTML entero del contenedor. Es una técnica sencilla y muy usada en frameworks modernos (React, Vue…).

5. Crear e insertar elementos con document.createElement y appendChild

La alternativa a innerHTML es crear los elementos de forma programática con la API del DOM:

function handleClickExtra(evento) {
  const nuevoElementoHtml = document.createElement("div"); // 1. Crear el elemento

  nuevoElementoHtml.classList.add("a"); // 2. Modificar propiedades
  nuevoElementoHtml.classList.add("b");
  nuevoElementoHtml.textContent = elinput.value; // 3. Añadir contenido

  cuadrados2.appendChild(nuevoElementoHtml); // 4. Insertar en el DOM
}

Los pasos habituales son:

1. Crear el elemento con document.createElement("etiqueta")
2. Configurarlo: añadir clases, atributos, contenido…
3. Insertarlo en el DOM con appendChild(nuevoElemento) (o prepend, insertBefore, etc.)

6. Comparación: innerHTML vs createElement + appendChild

Ambas técnicas permiten añadir contenido al DOM pero tienen diferencias importantes:

7. setTimeout — ejecutar código de forma diferida

setTimeout permite ejecutar una función una vez, después de un tiempo de espera en milisegundos:

setTimeout(functionTimeout, 1000); // ejecuta functionTimeout en 1 segundo

function functionTimeout() {
  console.log("Han pasado 1000 ms");
}

La firma completa es:

const idTemporizador = setTimeout(callback, delay_en_ms);

• callback — la función a ejecutar (sin paréntesis)
• delay_en_ms — tiempo de espera en milisegundos
• Devuelve un identificador que se puede pasar a clearTimeout(id) para cancelarlo

8. Patrón de setTimeout recursivo

Para ejecutar código repetidamente sin un intervalo fijo, se puede llamar a setTimeout dentro de la propia función de callback:

setTimeout(functionTimeout, 1000);

function functionTimeout() {
  handleClickExtra(); // hace algo
  setTimeout(functionTimeout, 1000); // se vuelve a programar a sí misma
}

Esto crea un bucle asíncrono: la función se ejecuta, realiza su trabajo y vuelve a programarse para dentro de 1 segundo.

9. document.querySelector y la función helper $

document.querySelector es el selector moderno del DOM: acepta cualquier selector CSS y devuelve el primer elemento que coincide (o null si no hay ninguno).

const boton = document.querySelector("#empezar"); // por id
const titulo = document.querySelector("h1"); // por etiqueta
const activo = document.querySelector(".active"); // por clase
const span = document.querySelector("#crono > span"); // selector anidado

En el ejemplo de la sesión se definió una pequeña función helper para abreviar la llamada:

function $(selector) {
  return document.querySelector(selector);
}

// Uso equivalente a document.querySelector
const inputMinutos = $("#minutos");
const inputSegundos = $("#segundos");

10. parseInt — convertir string a entero

Como .value de un input siempre devuelve un string, es necesario convertirlo a número antes de operar aritméticamente. parseInt convierte un string a número entero:

const minutos = inputMinutos.value; // "05" (string)
const mNum = parseInt(minutos); // 5   (number)

Sin la conversión, la suma de strings produce concatenación en lugar de suma numérica:

console.log("2" + "3"); // "23" (concatenación ❌)
console.log(parseInt("2") + parseInt("3")); // 5  (suma ✅)

parseInt acepta un segundo argumento llamado radix (base numérica). Para números decimales es buena práctica pasarlo explícitamente:

parseInt("10", 10); // 10 en base 10 → 10
parseInt("10", 2); // "10" en base 2 → 2

11. Math.floor — redondear hacia abajo

Math.floor redondea un número hacia abajo al entero más cercano:

Math.floor(3.9); // 3
Math.floor(3.1); // 3
Math.floor(0.9); // 0

En el temporizador se usa para convertir los segundos totales en minutos y segundos:

let minutos = Math.floor(cuentaAtras / 60); // parte entera de la división
let segundos = cuentaAtras % 60; // resto de la división

12. Zeros a la izquierda (padding)

Otro de los problemas encontrados durante la sesión fue que los números menores de 10 se mostraban sin el cero inicial ("5" en lugar de "05"). La solución fue añadir el cero manualmente:

if (minutos < 10) {
  minutos = "0" + minutos; // "05" en lugar de "5"
}
if (segundos < 10) {
  segundos = "0" + segundos;
}

minutos = String(minutos).padStart(2, "0"); // "05"
segundos = String(segundos).padStart(2, "0"); // "09"

13. El temporizador de cuenta atrás

El ejemplo del temporizador combina todos los conceptos de la sesión:

function $(selector) {
  return document.querySelector(selector);
}

const inputMinutos = $("#minutos");
const inputSegundos = $("#segundos");
const buttonStart = $("#empezar");

buttonStart.addEventListener("click", handleClick);

let cuentaAtras = 0;

function handleClick(event) {
  const minutos = inputMinutos.value;
  const segundos = inputSegundos.value;

  // parseInt para evitar concatenación de strings
  cuentaAtras = parseInt(minutos) * 60 + parseInt(segundos);

  pintameElCrono();

  setTimeout(cadaSegundo, 1000);
  setTimeout(finalizarCuentaAtras, cuentaAtras * 1000);
}

function cadaSegundo() {
  cuentaAtras--;
  pintameElCrono();

  if (cuentaAtras > 0) setTimeout(cadaSegundo, 1000); // solo sigue si queda tiempo
}

function finalizarCuentaAtras() {
  const body = $("body");
  body.classList.add("red"); // fondo rojo al llegar a cero
}

function pintameElCrono() {
  const minutero = $("#temporizador>#m");
  const segundero = $("#temporizador>#s");

  let minutos = Math.floor(cuentaAtras / 60);
  let segundos = cuentaAtras % 60;

  // Añadir cero a la izquierda si hace falta
  if (minutos < 10) minutos = "0" + minutos;
  if (segundos < 10) segundos = "0" + segundos;

  minutero.textContent = minutos;
  segundero.textContent = segundos;
}

14. Estructura de los archivos de la sesión

example/
├── session19/
│   ├── index.html   — Página con input, botón y dos contenedores de cuadrados
│   ├── index.js     — Ejemplo de innerHTML, createElement, appendChild y setTimeout
│   └── style.css    — Estilos para los contenedores de cuadrados
└── temporizador/
    ├── index.html   — Formulario con inputs de minutos/segundos y display del crono
    ├── index.js     — Lógica del temporizador con querySelector, parseInt y setTimeout
    └── style.css    — Estilos básicos y clase .red para el estado de finalización

Resumen

En esta sesión hemos aprendido:

• ✅ textContent, innerText e innerHTML — tres formas de leer y escribir contenido en un elemento del DOM
• ✅ .value — leer el valor actual de un <input> (siempre string)
• ✅ Múltiples listeners — un mismo elemento puede tener varios addEventListener para el mismo evento
• ✅ Renderizado con innerHTML — construir HTML como string con forEach + template literals y asignarlo de golpe
• ✅ document.createElement + appendChild — crear e insertar nodos en el DOM de forma programática
• ✅ innerHTML vs createElement — cuándo usar cada técnica y sus implicaciones de seguridad y rendimiento
• ✅ setTimeout — ejecutar una función de forma diferida (una vez)
• ✅ setTimeout recursivo — patrón para crear un bucle asíncrono
• ✅ document.querySelector — selector moderno que acepta cualquier selector CSS
• ✅ Función helper $ — abreviar document.querySelector con una función de una línea
• ✅ parseInt — convertir string a entero para evitar concatenaciones indeseadas
• ✅ Math.floor y % — calcular minutos y segundos a partir de un total en segundos
• ✅ Padding de zeros — mostrar "05" en lugar de "5" con if o .padStart()

Lo más importante:

Recursos Adicionales

• MDN - textContent
• MDN - innerHTML
• MDN - innerText
• MDN - document.createElement
• MDN - Node.appendChild
• MDN - document.querySelector
• MDN - setTimeout
• MDN - parseInt
• MDN - Math.floor
• MDN - String.prototype.padStart
• javascript.info - Modificando el documento
• javascript.info - setTimeout y setInterval
• javascript.info - Inyección XSS con innerHTML