0Pricing
JavaScript Academy · Lektion

Elemente mit querySelector auswählen

Finden Sie Elemente mithilfe von CSS-Selektoren.

Elemente mit querySelector auswählen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

querySelector kennenlernen

querySelector gibt das erste Element zurück, das einem CSS-Selektor entspricht, oder null, wenn keine Übereinstimmung gefunden wird. Die Methode ist auf document und auf jedem Element verfügbar.

const title = document.querySelector("h1");
console.log(title.textContent);

Jeder CSS-Selektor funktioniert

Die Stärke von querySelector besteht darin, dass dieselben Selektoren akzeptiert werden, die Sie auch in CSS verwenden: Tags, Klassen, IDs, Attribute und Kombinationen daraus.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll gibt alle passenden Elemente als statische NodeList zurück. Auch bei null Treffern wird eine leere Liste zurückgegeben (niemals null).

const cards = document.querySelectorAll(".card");
console.log(cards.length);

Ergebnisse durchlaufen

Eine von querySelectorAll zurückgegebene NodeList unterstützt direkt forEach, wodurch sich die Iteration übersichtlich schreiben lässt.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

Nachfahren-Selektoren

Sie können verschachtelte Elemente wie in CSS mit einem Leerzeichen als Nachfahren-Selektor ansprechen. Damit finden Sie jedes .price-Element innerhalb eines .product-Elements.

const prices = document.querySelectorAll(".product .price");

Klassen kombinieren

Werden Klassen ohne Leerzeichen aneinandergereiht, muss ein Element alle Klassen besitzen. Hier wählen wir Schaltflächen aus, die sowohl primär als auch groß sind.

const btn = document.querySelector("button.primary.large");

Bereichsbezogene Abfragen

Wenn Sie querySelector auf einem Element und nicht auf document aufrufen, wird nur innerhalb dieses Elements gesucht. So bleiben die Suchen lokal und schnell.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

Pseudo-Klassen

Auch strukturelle Pseudo-Klassen wie :first-child und :nth-of-type funktionieren.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

Keine Treffer behandeln

Da querySelector null zurückgeben kann, sollten Sie das Ergebnis vor der Verwendung prüfen, um einen TypeError zu vermeiden.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

Attributselektoren

Mit Attributselektoren können Sie anhand von Datenattributen auswählen. Das eignet sich hervorragend, um Elemente anzusprechen, ohne von Klassen abhängig zu sein.

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector im Vergleich zu älteren APIs

querySelector ist flexibler als getElementById, weil die Methode jeden Selektor akzeptiert. Abfragen über IDs sind jedoch weiterhin etwas schneller. Verwenden Sie jeweils das passende Werkzeug.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

Kurze Überprüfung

Testen Sie Ihr Verständnis von Selektoren.

Zusammenfassung

Sie haben gelernt, dass querySelector den ersten Treffer (oder null) zurückgibt und querySelectorAll eine statische NodeList mit allen Treffern liefert. Beide akzeptieren vollständige CSS-Selektoren und können auf ein übergeordnetes Element begrenzt werden. Prüfen Sie bei der Verwendung von querySelector immer auf null.

Häufig gestellte Fragen

Ist die Lektion „Elemente mit querySelector auswählen“ kostenlos?

Ja — der vollständige Text von „Elemente mit querySelector auswählen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Elemente mit querySelector auswählen“?

Finden Sie Elemente mithilfe von CSS-Selektoren. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Elemente mit querySelector auswählen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Elemente mit querySelector auswählen
  2. getElementById und getElementsByClassName
  3. Eltern-, Kind- und Geschwisterelemente durchlaufen
  4. NodeList und HTMLCollection
← Zurück zu JavaScript Academy