Manipular el DOM: querySelector, escuchadores de eventos

Selecciona elementos de la página, reacciona a los clics y adopta la delegación de eventos para un código eficiente.

9 min · 3 preguntas

El DOM es la representación viva de tu página HTML: manipularlo es la forma en que JavaScript hace interactiva una interfaz. El dúo esencial: seleccionar un elemento y luego escuchar lo que le ocurre. Empecemos con una pequeña estructura inicial.

<button id="save-btn" class="btn">Save</button>
<ul class="task-list">
  <li>Buy groceries</li>
  <li>Call the client</li>
</ul>

querySelector acepta cualquier selector CSS (#id, .class, ul li, [data-id]) y devuelve el primer elemento que coincide, o null. querySelectorAll devuelve todos los elementos que coinciden en un NodeList, que puedes recorrer con forEach.

const button = document.querySelector("#save-btn");
const firstTask = document.querySelector(".task-list li");
const tasks = document.querySelectorAll(".task-list li");

console.log(tasks.length); // 2
console.log(firstTask.textContent); // "Buy groceries"

Para reaccionar a una acción del usuario, addEventListener asocia una función a un tipo de evento: click, input, submit, keydown... La función recibe un objeto event que describe lo que ha ocurrido. Luego puedes cambiar el contenido con textContent y el estilo con classList.

const button = document.querySelector("#save-btn");

button.addEventListener("click", () => {
  button.textContent = "Saved!";
  button.classList.add("success");
});

Un buen hábito profesional: una lista de 200 elementos no merece 200 escuchadores. Asocia un único escuchador al padre e identifica el elemento sobre el que se ha hecho clic con event.target. Esto es la delegación de eventos: funciona incluso para elementos añadidos más tarde.

const list = document.querySelector(".task-list");

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (item) {
    item.classList.toggle("done");
  }
});

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué devuelve document.querySelector(".btn") si varios elementos tienen la clase btn?
   • Todos los elementos que coinciden
   • Únicamente el primer elemento que coincide
   • Un error, porque el selector es ambiguo
2. ¿Cuál es la función del segundo argumento de addEventListener?
   • Es la función que se ejecuta cada vez que se dispara el evento
   • Es el retardo antes de que empiece la escucha
   • Es el selector CSS del elemento objetivo
3. En un escuchador asociado a un padre, ¿qué representa event.target?
   • El padre que contiene el escuchador
   • El elemento exacto sobre el que ocurrió el evento
   • La ventana del navegador