Das DOM manipulieren: querySelector, Event-Listener

Wähle Elemente auf der Seite aus, reagiere auf Klicks und setze Event-Delegation für performanten Code ein.

9 Min. · 3 Fragen

Das DOM ist die lebendige Repräsentation deiner HTML-Seite: Es zu manipulieren ist die Art, wie JavaScript eine Oberfläche interaktiv macht. Das unverzichtbare Duo: ein Element auswählen und dann darauf hören, was mit ihm geschieht. Fangen wir mit einer kleinen Ausgangsstruktur an.

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

querySelector akzeptiert jeden CSS-Selektor (#id, .class, ul li, [data-id]) und gibt das erste passende Element zurück, oder null. querySelectorAll gibt alle passenden Elemente in einer NodeList zurück, über die du mit forEach iterieren kannst.

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"

Um auf eine Benutzeraktion zu reagieren, hängt addEventListener eine Funktion an einen Ereignistyp: click, input, submit, keydown... Die Funktion erhält ein event-Objekt, das beschreibt, was passiert ist. Du kannst dann den Inhalt mit textContent und das Styling mit classList ändern.

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

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

Eine gute professionelle Gewohnheit: Eine Liste mit 200 Elementen verdient keine 200 Listener. Hänge einen einzigen Listener an das Elternelement und identifiziere das angeklickte Element mit event.target. Das ist Event-Delegation: Sie funktioniert sogar für später hinzugefügte Elemente.

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

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

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was gibt document.querySelector(".btn") zurück, wenn mehrere Elemente die Klasse btn haben?
   • Alle passenden Elemente
   • Nur das erste passende Element
   • Einen Fehler, weil der Selektor mehrdeutig ist
2. Welche Rolle hat das zweite Argument von addEventListener?
   • Es ist die Funktion, die bei jedem Auslösen des Ereignisses ausgeführt wird
   • Es ist die Verzögerung, bevor das Zuhören beginnt
   • Es ist der CSS-Selektor des Zielelements
3. Was stellt event.target in einem an ein Elternelement gehängten Listener dar?
   • Das Elternelement, das den Listener hält
   • Das genaue Element, auf dem das Ereignis aufgetreten ist
   • Das Browserfenster