Eltern-, Kind- und Geschwisterelemente durchlaufen
Navigieren Sie im DOM-Baum zwischen verwandten Knoten.
Eltern-, Kind- und Geschwisterelemente durchlaufen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Warum der DOM-Baum durchlaufen wird
Sobald Sie ein Element haben, benötigen Sie häufig seine Beziehungen: den Container, der es umgibt, die darin enthaltenen Elemente oder das direkt danebenliegende Element. Eigenschaften zur DOM-Navigation ermöglichen Ihnen, sich im Baum zu bewegen.
parentElement
parentElement liefert das Element, das das aktuelle Element enthält, oder null am oberen Ende des Baums.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);children
children ist eine Live-HTMLCollection der direkten untergeordneten Elemente eines Elements (Textknoten werden ausgeschlossen).
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild und lastElementChild
Diese Eigenschaften führen direkt zum ersten oder letzten untergeordneten Element und überspringen Text- und Kommentarknoten.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling gibt das Element zurück, das innerhalb desselben übergeordneten Elements unmittelbar auf das aktuelle folgt.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling bewegt sich in die andere Richtung. Beide geben null zurück, wenn es kein Geschwisterelement gibt.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Element- im Vergleich zu Node-Eigenschaften
Vorsicht: childNodes, nextSibling und parentNode schließen Textknoten (Leerraum) ein. Die *Element*-Varianten sind normalerweise die richtige Wahl.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest bewegt sich vom aktuellen Element aus im Baum nach oben und gibt den nächsten Vorfahren (oder das Element selbst) zurück, der einem Selektor entspricht.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest für Event-Delegation
closest ist ideal, wenn ein Klick auf einem inneren Element landet, Sie aber den äußeren Container benötigen, der das Ereignis verarbeitet.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches prüft, ob ein Element selbst einem Selektor entspricht, und gibt einen booleschen Wert zurück. Das ist bei der DOM-Navigation sehr nützlich.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Navigation kombinieren
Sie können mehrere Schritte der DOM-Navigation verketten, um komplexe Strukturen zu durchlaufen, zum Beispiel von einer Schaltfläche nach oben zu ihrer Zeile und weiter zur nächsten Zeile.
const next = btn.closest("tr").nextElementSibling;Kurze Überprüfung
Wählen Sie die richtige Eigenschaft.
Zusammenfassung
Mit parentElement und closest bewegen Sie sich nach oben, mit children, firstElementChild und lastElementChild zu den untergeordneten Elementen und mit nextElementSibling und previousElementSibling seitwärts. Bevorzugen Sie die Eigenschaften, die nur Elemente berücksichtigen, um Textknoten mit Leerraum zu überspringen.
Häufig gestellte Fragen
Ist die Lektion „Eltern-, Kind- und Geschwisterelemente durchlaufen“ kostenlos?
Ja — der vollständige Text von „Eltern-, Kind- und Geschwisterelemente durchlaufen“ 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 „Eltern-, Kind- und Geschwisterelemente durchlaufen“?
Navigieren Sie im DOM-Baum zwischen verwandten Knoten. 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 3 von 4.
Wie lange dauert die Lektion „Eltern-, Kind- und Geschwisterelemente durchlaufen“?
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
- Elemente mit querySelector auswählen
- getElementById und getElementsByClassName
- Eltern-, Kind- und Geschwisterelemente durchlaufen
- NodeList und HTMLCollection