0Pricing
Frontend Academy · Lektion

querySelector und querySelectorAll

Finden Sie einzelne und mehrere Elemente mit CSS-Selektorzeichenketten und verstehen Sie den Unterschied zwischen NodeList und HTMLCollection.

querySelector und querySelectorAll ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist das DOM?

Das Document Object Model ist ein Baum aus JavaScript-Objekten, der die HTML-Struktur darstellt. JavaScript interagiert mit dem DOM, um Elemente zu lesen, zu ändern, hinzuzufügen und zu entfernen – dadurch werden Webseiten dynamisch.

getElementById

Der klassische Selektor. document.getElementById('myId') gibt das Element mit dieser ID zurück oder null, wenn es nicht gefunden wurde. Er ist schnell, funktioniert aber nur mit IDs.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector – einzelnes Element

document.querySelector(cssSelector) gibt das erste Element zurück, das einem beliebigen CSS-Selektor entspricht. Wenn kein Element gefunden wird, gibt die Methode null zurück. Sie ist flexibler als getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll – mehrere Elemente

document.querySelectorAll(cssSelector) gibt eine statische NodeList aller passenden Elemente zurück. Sie ist kein Live-Array – Sie müssen sie durchlaufen. Verwenden Sie Array.from() oder den Spread-Operator, um Array-Methoden zu nutzen.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Bereichsbezogene Abfragen

Sie können querySelector auf jedem Element aufrufen, um nur innerhalb dieses Teilbaums zu suchen – nicht im gesamten Dokument. Das ist effizienter und verhindert, dass Sie versehentlich Elemente aus anderen Bereichen der Seite auswählen.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList im Vergleich zu HTMLCollection

NodeList (von querySelectorAll) ist statisch – sie bildet den Zustand des DOM zum Zeitpunkt der Abfrage ab. HTMLCollection (von getElementsByClassName usw.) ist live – sie wird automatisch aktualisiert, wenn sich das DOM ändert. Beide sind arrayähnlich, aber keine Arrays.

Das DOM durchlaufen

Von jedem Element aus können Sie navigieren: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Prüfen, ob ein Element vorhanden ist

Prüfen Sie immer, ob querySelector nicht null zurückgegeben hat, bevor Sie das Ergebnis verwenden – insbesondere bei Elementen, die nicht auf jeder Seite vorhanden sein müssen.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() und closest()

element.matches(selector) gibt true zurück, wenn das Element dem Selektor entspricht. element.closest(selector) geht im DOM-Baum nach oben und gibt den ersten Vorfahren zurück, der dem Selektor entspricht, oder null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) gibt true zurück, wenn sich das untergeordnete Element innerhalb des übergeordneten Elements befindet (oder selbst das übergeordnete Element ist). Das ist nützlich, um zu prüfen, ob ein Klick außerhalb eines Modals oder Dropdowns erfolgt ist.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Performance: DOM-Abfragen minimieren

DOM-Abfragen sind nicht kostenlos. Speichern Sie das Ergebnis in einer Variablen, statt wiederholt querySelector aufzurufen. Bündeln Sie in Schleifen DOM-Lese- und DOM-Schreibzugriffe, um Layout-Thrashing zu vermeiden.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Kurzer Test

Welche Methode gibt eine statische NodeList aller passenden Elemente zurück?

Zusammenfassung: DOM-Elemente auswählen

querySelector gibt die erste Übereinstimmung zurück. querySelectorAll gibt alle Übereinstimmungen als statische NodeList zurück. Beschränken Sie Abfragen für eine bessere Effizienz auf einen Teilbaum. Speichern Sie Abfrageergebnisse zwischen. Verwenden Sie closest() für Event-Delegation. Prüfen Sie immer auf null, bevor Sie ein abgefragtes Element verwenden.

Häufig gestellte Fragen

Ist die Lektion „querySelector und querySelectorAll“ kostenlos?

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

Was lerne ich in „querySelector und querySelectorAll“?

Finden Sie einzelne und mehrere Elemente mit CSS-Selektorzeichenketten und verstehen Sie den Unterschied zwischen NodeList und HTMLCollection. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 „querySelector und querySelectorAll“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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. querySelector und querySelectorAll
  2. addEventListener und das Event-Objekt
  3. Inhalte ändern: textContent, innerHTML, classList
  4. Elemente erstellen und anhängen
← Zurück zu Frontend Academy