JavaScript DOM-Elemente auswählen

Bevor du mit JavaScript irgendetwas auf einer Seite verändern kannst — Text aktualisieren, eine Klasse umschalten, einen Klick-Handler anhängen — musst du zunächst das gewünschte Element finden. Dieser Vorgang des Findens wird Auswählen eines DOM-Elements genannt. Dieses Kapitel behandelt alle dafür benötigten Methoden, erklärt, was jede davon zurückgibt, und zeigt, wann welche Methode am besten geeignet ist.

Was „ein Element auswählen" bedeutet

Das Document Object Model (DOM) ist die lebendige, baumförmige Darstellung deines HTML im Browser. Jedes Tag wird zu einem Node-Objekt, das du in JavaScript lesen und verändern kannst. Auswählen ist der Prozess, einen oder mehrere dieser Nodes zu lokalisieren, um eine Referenz darauf in einer Variablen zu speichern:

const heading = document.querySelector('h1');
// `heading` now points at the real <h1> on the page.

Sobald du diese Referenz hast, funktioniert alles andere — das Lesen von Attributen und Eigenschaften, das Ändern von Stilen, das Hinzufügen von Event-Listenern — damit.

Die Auswahlmethoden lassen sich in zwei Gruppen einteilen:

• ID- / Klassen- / Tag-Suchen — schnell, geben live Collections zurück (außer getElementById).
• CSS-Selektor-Suchen (querySelector, querySelectorAll) — flexibel, akzeptieren jeden CSS-Selektor, geben ein statisches Ergebnis zurück.

Ein Element nach ID auswählen: getElementById

Der schnellste Weg, ein einzelnes Element zu greifen, ist über seine eindeutige id. Die Methode gibt das Element zurück oder null, wenn kein Element mit dieser ID existiert.

const element = document.getElementById('example');
element.textContent = 'You selected the element by its ID!';

Da IDs eindeutig sein sollen, gibt getElementById ein einzelnes Element zurück (keine Collection) und ist die direkteste und leistungsfähigste Suche.

Nach Klassenname auswählen: getElementsByClassName

Diese Methode gibt eine live HTMLCollection aller Elemente zurück, die die angegebene Klasse tragen. „Live" bedeutet, dass die Collection sich automatisch aktualisiert, wenn sich das DOM ändert.

const elements = document.getElementsByClassName('example');
Array.from(elements).forEach((element, index) => {
    element.textContent = `Element ${index + 1} changed!`;
});

Eine HTMLCollection ist array-ähnlich, aber kein echtes array, daher fehlen ihr forEach/map. Konvertiere sie mit Array.from() (oder dem Spread-Operator [...elements]), bevor du array-Methoden verwendest.

Nach Tag-Name auswählen: getElementsByTagName

Wählt alle Elemente mit einem bestimmten Tag-Namen aus und gibt eine live HTMLCollection zurück.

const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.backgroundColor = 'yellow';
}

Übergib '*', um jedes Element auf der Seite zu treffen. Das ist nützlich, wenn du alle Tags einer bestimmten Art bearbeiten möchtest, beispielsweise um jeden Absatz hervorzuheben.

Nach name-Attribut auswählen: getElementsByName

Gibt eine live NodeList von Elementen zurück, die dasselbe name-Attribut teilen. Dies ist am nützlichsten für Formularelemente — zum Beispiel alle Radio-Buttons einer Gruppe:

const options = document.getElementsByName('plan');
options.forEach((radio) => {
    radio.addEventListener('change', () => {
        console.log('Selected plan:', radio.value);
    });
});

Für eine ausführlichere Formularverarbeitung, siehe Arbeiten mit Formularen im DOM.

Mit CSS-Selektoren auswählen: querySelector

querySelector gibt das erste Element zurück, das einem beliebigen CSS-Selektor entspricht, den du übergibst, oder null, wenn nichts übereinstimmt. Dies ist die vielseitigste Methode für ein einzelnes Element.

const element = document.querySelector('.example');
element.style.backgroundColor = 'lightblue';

Da sie die vollständige CSS-Selektor-Syntax akzeptiert, kannst du tief gezielt suchen: querySelector('nav ul li.active a') findet den ersten übereinstimmenden Link, ohne mehrere Aufrufe zu verketten.

Alle Treffer auswählen: querySelectorAll

Gibt eine statische NodeList aller Elemente zurück, die dem Selektor entsprechen. Im Gegensatz zu getElementsBy... aktualisiert sich dieser Schnappschuss nicht, wenn sich das DOM später ändert.

const elements = document.querySelectorAll('.example');
elements.forEach((element, index) => {
    element.style.backgroundColor = 'lightgreen';
    element.textContent = `Element ${index + 1} highlighted!`;
});

Eine NodeList hat eine echte forEach-Methode, sodass du sie direkt iterieren kannst. Um map/filter zu nutzen, konvertiere sie zuerst mit Array.from(elements).

Eine Suche auf ein Element eingrenzen

Alle querySelector*- und getElementsBy*-Methoden existieren auch auf einzelnen Elementen, nicht nur auf document. Wenn du sie auf einem Element aufrufst, beschränkt sich die Suche auf dessen Nachkommen:

const card = document.querySelector('.card');
const title = card.querySelector('.title'); // only inside .card

Das Eingrenzen hält Abfragen schnell und verhindert, dass unbeabsichtigt Elemente anderswo auf der Seite gefunden werden.

Ein Element testen: matches

matches gibt kein Element zurück — es gibt true/false zurück, je nachdem, ob ein bestimmtes Element einem CSS-Selektor entspricht. Es eignet sich ideal innerhalb von Event-Handlern und bei Event-Delegation.

const element = document.getElementById('test');
if (element.matches('.example')) {
    element.style.color = 'red';
    element.textContent = 'Element matches the selector!';
}

Den Baum nach oben durchlaufen: closest

closest beginnt beim Element selbst und geht durch seine Vorfahren nach oben, bis es das nächste Element findet, das dem Selektor entspricht (oder null). Es ist der sauberste Weg, ein umgebendes Element zu finden.

const element = document.getElementById('child');
const parent = element.closest('.outer');
parent.style.border = '2px solid red';

Selektoren für präzises Targeting kombinieren

CSS-Selektoren lassen sich kombinieren, sodass du so spezifisch sein kannst, wie du brauchst, ohne zusätzlichen Code:

const element = document.querySelector('.example.special');
element.style.backgroundColor = 'pink';
element.textContent = 'Special element highlighted!';

Hier trifft .example.special ein Element, das beide Klassen hat. Du kannst Kombinatoren verketten (>, Nachfahren-Leerzeichen, +, ~), Attributselektoren (input[type="email"]) und Pseudoklassen (li:first-child).

Welche Methode soll ich verwenden?

Faustregeln:

• Greife standardmäßig auf querySelector / querySelectorAll zurück — eine konsistente API mit voller CSS-Unterstützung.
• Verwende getElementById, wenn du eine eindeutige ID hast und die schnellstmögliche Suche benötigst.
• Nutze eine live Collection (getElementsBy...) nur dann, wenn du gezielt möchtest, dass sie DOM-Änderungen verfolgt; andernfalls bevorzuge das statische querySelectorAll.

Häufige Fallstricke

• null-Ergebnisse. getElementById, querySelector und closest geben alle null zurück, wenn kein Treffer vorliegt. Überprüfe das Ergebnis immer, bevor du es verwendest.
• Ausführung vor dem Aufbau des DOM. Wenn dein Skript in <head> läuft, bevor die Elemente geparst wurden, liefern Selektionen nichts zurück. Setze Skripte ans Ende von <body>, nutze defer, oder warte auf DOMContentLoaded.
• Collections sind keine arrays. HTMLCollection hat kein forEach. NodeList hat forEach, aber kein map/filter. Konvertiere im Zweifelsfall mit Array.from().

Fazit

Das Auswählen von Elementen ist der Einstiegspunkt für jede DOM-Aufgabe. Für den Großteil des Codes bieten querySelector und querySelectorAll eine flexible, CSS-gestützte API; getElementById bleibt die schnellste Wahl für eindeutige IDs; und matches / closest ermöglichen eine saubere Event-Delegation. Sobald du Elemente zuverlässig auswählen kannst, fahre mit DOM-Manipulation und DOM-Traversierung fort.

Übungen