Ejercicio: El DOM: leer y cambiar la página

Objetivo

Manipular una página real: cambiar textos, crear y eliminar elementos, alternar clases y vaciar una lista, comprobando los resultados directamente en el DOM.

La página de partida

Esta es la página sobre la que trabaja tu código. No la modifiques: escribe solo el JavaScript.

<h1 id="titulo">Mi lista</h1>
<p id="mensaje"></p>
<ul id="lista">
  <li>Primero</li>
  <li>Segundo</li>
</ul>
<div id="caja" class="caja">Una caja</div>

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Escribe cambiarTitulo(texto) que ponga texto como contenido de #titulo.
• Escribe agregarItem(texto) que cree un <li> con ese texto y lo añada al final de #lista.
• Escribe quitarUltimo() que elimine el último <li> de la lista (si no hay ninguno, no debe dar error).
• Escribe marcarPrimero() que añada la clase hecho al primer <li> de la lista.
• Escribe contar() que muestre en #mensaje el texto "Hay N elementos" (con el número actual de <li>) y devuelva N.
• Escribe alternarCaja() que alterne la clase activa en #caja (la ponga si no está y la quite si está).
• Escribe limpiar() que vacíe la lista por completo.

function cambiarTitulo(texto) {
  document.getElementById("titulo").textContent = texto;
}

function agregarItem(texto) {
  const li = document.createElement("li");
  li.textContent = texto;
  document.getElementById("lista").append(li);
}

function quitarUltimo() {
  const ultimo = document.getElementById("lista").lastElementChild;
  if (ultimo) ultimo.remove();
}

function marcarPrimero() {
  const primero = document.querySelector("#lista li");
  if (primero) primero.classList.add("hecho");
}

function contar() {
  const n = document.querySelectorAll("#lista li").length;
  document.getElementById("mensaje").textContent = `Hay ${n} elementos`;
  return n;
}

function alternarCaja() {
  document.getElementById("caja").classList.toggle("activa");
}

function limpiar() {
  document.getElementById("lista").replaceChildren();
}