0Pricing
JavaScript Academy · Lektion

NodeList und HTMLCollection

Verstehen Sie die Unterschiede zwischen Element-Sammlungen.

NodeList und HTMLCollection ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Zwei Collection-Typen

DOM-Methoden geben eines von zwei listenähnlichen Objekten zurück: eine NodeList oder eine HTMLCollection. Sie sehen ähnlich aus, unterscheiden sich aber in wichtigen Punkten.

Woher NodeList stammt

querySelectorAll und childNodes geben NodeList-Objekte zurück. Die von querySelectorAll zurückgegebene NodeList ist statisch: eine Momentaufnahme zum Zeitpunkt der Abfrage.

const items = document.querySelectorAll(".item"); // static NodeList

Woher HTMLCollection stammt

getElementsByClassName, getElementsByTagName und die Eigenschaft children geben Live-HTMLCollection-Objekte zurück.

const items = document.getElementsByClassName("item"); // live HTMLCollection

Statisch im Vergleich zu live

Eine statische NodeList behält ihren ursprünglichen Inhalt bei, selbst wenn sich das DOM ändert. Eine Live-HTMLCollection spiegelt hinzugefügte und entfernte Elemente automatisch wider.

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

Unterstützung für forEach

NodeList verfügt über ein integriertes forEach. HTMLCollection nicht, daher müssen Sie sie konvertieren oder eine Schleife mit einem Index verwenden.

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

Keine der beiden ist ein echtes Array

Beide verhalten sich ähnlich wie Arrays: Sie besitzen length und den Zugriff über Indizes, aber nicht map, filter und reduce.

const list = document.querySelectorAll(".item");
// list.map is undefined

Mit Array.from konvertieren

Array.from wandelt beide Collection-Typen in ein echtes Array um und macht dadurch alle Array-Methoden verfügbar.

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

Mit Spread konvertieren

Der Spread-Operator ist eine kurze Alternative, die ebenfalls ein echtes Array erzeugt.

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

Die Falle bei Schleifen über Live-Listen

Wenn Sie Elemente während der Iteration einer Live-HTMLCollection entfernen, verschieben sich die Indizes und einige Elemente werden übersprungen. Konvertieren Sie die Collection zuerst in ein Array, um sicher zu iterieren.

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

Beide indizieren

Beide unterstützen numerische Indizes und length. Der grundlegende Zugriff sieht daher identisch aus, obwohl sich ihr Verhalten im Hintergrund unterscheidet.

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

Die richtige Variante auswählen

Verwenden Sie querySelectorAll, wenn Sie eine stabile Momentaufnahme und ein integriertes forEach benötigen. Verwenden Sie Live-Collections, wenn die Liste ausdrücklich mit dem DOM synchron bleiben soll.

Kurze Überprüfung

Erkennen Sie den Unterschied.

Zusammenfassung

NodeList (von querySelectorAll) ist statisch und besitzt forEach; HTMLCollection (von getElementsByClassName, getElementsByTagName und children) ist live und besitzt kein forEach. Keine der beiden ist ein echtes Array. Verwenden Sie Array.from oder Spread zur Konvertierung, bevor Sie map/filter/reduce verwenden oder während Änderungen sicher iterieren.

Häufig gestellte Fragen

Ist die Lektion „NodeList und HTMLCollection“ kostenlos?

Ja — der vollständige Text von „NodeList und HTMLCollection“ 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 „NodeList und HTMLCollection“?

Verstehen Sie die Unterschiede zwischen Element-Sammlungen. 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 4 von 4.

Wie lange dauert die Lektion „NodeList und HTMLCollection“?

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