0Pricing
JavaScript Academy · Lektion

getElementById und getElementsByClassName

Verwenden Sie klassische Auswahlmethoden.

getElementById und getElementsByClassName ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

getElementById

getElementById gibt das einzelne Element mit der passenden id zurück oder null. IDs müssen auf einer Seite eindeutig sein, daher wird genau ein Element zurückgegeben.

const header = document.getElementById("header");
console.log(header.tagName);

Kein Hash-Symbol

Anders als bei CSS-Selektoren übergeben Sie die rohe ID ohne das #. Die Übergabe von "#header" würde keinen Treffer liefern.

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName gibt eine Live-HTMLCollection aller Elemente mit der angegebenen Klasse zurück.

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

HTMLCollection ist live

Die Collection wird automatisch aktualisiert, wenn sich das DOM ändert. Wenn Sie später eine neue .card hinzufügen, wächst cards.length, ohne dass Sie die Abfrage erneut ausführen müssen.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

Eine Collection indizieren

Greifen Sie über den Index auf Elemente zu. Eine HTMLCollection verhält sich ähnlich wie ein Array, ist aber kein echtes Array.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

Kein direktes forEach

Da HTMLCollection sich ähnlich wie ein Array, aber nicht wie ein echtes Array verhält, gibt es kein forEach. Konvertieren Sie die Collection zuerst oder verwenden Sie eine einfache for-Schleife.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName gibt eine Live-HTMLCollection jedes Elements mit einem bestimmten Tag zurück, zum Beispiel aller Absätze.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

Mehrere Klassen

Sie können mehrere durch Leerzeichen getrennte Klassennamen übergeben. Die Elemente müssen alle angegebenen Klassen besitzen, um aufgenommen zu werden.

const items = document.getElementsByClassName("btn primary");

Auf ein Element begrenzt

Diese Methoden sind auch auf Elementen verfügbar und begrenzen die Suche auf die Nachfahren dieses Elements.

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

In ein Array konvertieren

Um Array-Methoden wie map oder filter zu verwenden, breiten Sie die Collection in ein echtes Array aus.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

Wann Sie welche Methode verwenden

Verwenden Sie getElementById für schnelle, eindeutige Suchen. Bevorzugen Sie querySelectorAll, wenn Sie eine statische Momentaufnahme oder komplexe Selektoren benötigen. Verwenden Sie die getElementsBy*-Familie, wenn Sie ausdrücklich eine Live-Collection benötigen.

Kurze Überprüfung

Wählen Sie das richtige Verhalten.

Zusammenfassung

Sie haben getElementById gelernt (ein Element anhand der rohen ID, ohne #) sowie getElementsByClassName und getElementsByTagName (Live-HTMLCollections). Live-Collections müssen mit Array.from konvertiert werden, um Array-Methoden zu verwenden, und besitzen kein eigenes forEach.

Häufig gestellte Fragen

Ist die Lektion „getElementById und getElementsByClassName“ kostenlos?

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

Verwenden Sie klassische Auswahlmethoden. 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 2 von 4.

Wie lange dauert die Lektion „getElementById und getElementsByClassName“?

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