Effiziente Techniken zur DOM-Navigation
Beherrschen Sie Methoden wie .closest(), .siblings(), .find() und .parentsUntil(), um effizient durch den DOM-Baum zu navigieren und Performance-Engpässe zu vermeiden.
Effiziente Techniken zur DOM-Navigation ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. 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 jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Im DOM-Baum navigieren
Willkommen! In dieser Lektion lernen Sie effiziente Techniken kennen, um sich im Document Object Model (DOM) zu bewegen.
Das DOM ist wie ein Stammbaum für die Elemente Ihrer Webseite. Wenn Sie verstehen, wie Sie darin navigieren, können Sie Elemente präzise auswählen, auch ohne direkte IDs oder Klassen.
- Traverse: Sich über oder durch etwas bewegen.
- DOM: Die interne Darstellung Ihrer HTML-Struktur im Browser.
Nachkommen mit .find() finden
Die Methode .find() eignet sich ideal, um Nachkommenelemente zu finden. Sie sucht *innerhalb* der aktuell ausgewählten Elemente nach passenden Elementen.
Stellen Sie sich vor, Sie suchen nach bestimmten Gegenständen in einer bestimmten Kiste. Damit können Sie Ihre Suche sehr effektiv eingrenzen.
- Syntax:
$(selector).find(filterSelector) - Rückgabe: Ein neues jQuery-Objekt mit den gefundenen Nachkommenelementen.
.find() in Aktion
Sehen wir uns an, wie Sie alle Listenelemente (<li>) innerhalb einer bestimmten ungeordneten Liste (<ul>) finden.
Führen Sie den Code aus und sehen Sie, welche Elemente einen grünen Hintergrund erhalten!
<div id="container">
<ul id="myList">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<p>Some other text</p>
<ul id="anotherList">
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all <li> elements within #myList
$('#myList').find('li').css('background-color', 'lightgreen');
// You can also chain with specific selectors
$('#myList').find('.active').css('font-weight', 'bold');
});
</script>Nach oben navigieren mit .closest()
Manchmal müssen Sie einen Vorfahren (ein Eltern-, Großeltern- oder anderes übergeordnetes Element) eines Elements finden. Genau das erledigt die Methode .closest().
Sie beginnt beim aktuellen Element und bewegt sich *nach oben* durch den DOM-Baum. Dabei gibt sie den *ersten* Vorfahren zurück, der dem angegebenen Selektor entspricht.
- Syntax:
$(selector).closest(filterSelector) - Rückgabe: Ein jQuery-Objekt mit dem einzigen nächstgelegenen Vorfahren.
.closest() in Aktion
Stellen Sie sich vor, Sie klicken auf eine Schaltfläche tief innerhalb einer verschachtelten Struktur. Sie möchten den übergeordneten Hauptcontainer finden. .closest() ist dafür ideal.
Klicken Sie auf die Schaltfläche unten, um den nächstgelegenen <div>-Vorfahren hervorzuheben.
<div class="grandparent">
<div class="parent">
<p>Some text here</p>
<button id="myButton">Click Me</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
// Find the closest ancestor div and add a border
$(this).closest('div').css('border', '2px solid blue');
});
});
</script>Geschwister mit .siblings() erkunden
Elemente auf derselben Ebene im DOM-Baum werden als „Geschwister“ bezeichnet. Mit der Methode .siblings() können Sie sie alle auswählen.
Sie findet alle Elemente, die denselben Elternteil wie das aktuelle Element haben, und schließt das aktuelle Element selbst aus.
- Syntax:
$(selector).siblings(filterSelector) - Rückgabe: Ein neues jQuery-Objekt mit allen Geschwisterelementen.
.siblings() in Aktion
Heben wir beim Anklicken eines bestimmten Listenelements alle seine Geschwister hervor. Das ist für interaktive Listen oder Menüs nützlich.
Klicken Sie auf ein beliebiges Listenelement, um zu sehen, wie sich die Farbe seiner Geschwister ändert!
<ul id="menu">
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#menu li').on('click', function() {
// Remove highlight from previously selected siblings
$('#menu li').css('background-color', '');
// Highlight the clicked item's siblings
$(this).siblings().css('background-color', 'lightyellow');
// Highlight the clicked item itself (optional)
$(this).css('background-color', 'lightblue');
});
});
</script>Mit .parentsUntil() nach oben navigieren
Was ist, wenn Sie *mehrere* Vorfahren auswählen, aber an einem bestimmten Punkt anhalten möchten? Dann ist .parentsUntil() besonders nützlich.
Diese Methode bewegt sich im DOM-Baum nach oben und wählt alle Vorfahren des aktuellen Elements aus, *bis* sie ein Element erreicht, das durch den Selektor angegeben wird. Das „Stoppelement“ selbst wird nicht einbezogen.
- Syntax:
$(selector).parentsUntil(stopSelector, filterSelector) - Rückgabe: Ein jQuery-Objekt mit den ausgewählten Vorfahren.
.parentsUntil() in Aktion
Wir haben eine tief verschachtelte Struktur. Wählen wir alle Elternelemente eines <span> aus, bis wir ein bestimmtes <div class="container"> erreichen.
Führen Sie dieses Beispiel aus, um zu sehen, welche Elemente einen Rahmen erhalten. Beachten Sie jedoch, dass das „container“-Div selbst übersprungen wird!
<div class="body-wrapper">
<div class="container">
<div class="row">
<section>
<article>
<p>Hello <span>World!</span></p>
</article>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all parents of 'span' until the '.container' div
$('span').parentsUntil('.container').css('border', '1px dashed orange');
});
</script>Kurze Überprüfung
Sie haben ein <img>-Element, das sich in einem <div class="gallery-item"> befindet, das wiederum in einem <div class="gallery-row"> liegt. Wenn Sie das <img> auswählen, welche jQuery-Methode würden Sie verwenden, um *nur* das <div class="gallery-item"> zu erhalten?
Zusammenfassung: Effiziente DOM-Navigation
Großartig! Sie beherrschen nun wichtige jQuery-Methoden für eine effiziente Navigation im DOM:
.find(): Sucht *innerhalb* von Elementen nach Nachkommen..closest(): Findet den *nächstgelegenen Vorfahren*, der einem Selektor entspricht, indem die Methode im Baum *nach oben* geht..siblings(): Wählt alle Elemente auf derselben Ebene wie das aktuelle Element aus (außer diesem selbst)..parentsUntil(): Wählt mehrere Vorfahren *bis zu* einem bestimmten Stoppelement aus (dieses wird nicht einbezogen).
Wenn Sie diese Methoden gezielt einsetzen, schreiben Sie präziseren, performanteren und besser lesbaren jQuery-Code für dynamische Webanwendungen!
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 48
Häufig gestellte Fragen
Ist die Lektion „Effiziente Techniken zur DOM-Navigation“ kostenlos?
Ja — der vollständige Text von „Effiziente Techniken zur DOM-Navigation“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Effiziente Techniken zur DOM-Navigation“?
Beherrschen Sie Methoden wie .closest(), .siblings(), .find() und .parentsUntil(), um effizient durch den DOM-Baum zu navigieren und Performance-Engpässe zu vermeiden. Du übst jQuery 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 jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery 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 3.
Wie lange dauert die Lektion „Effiziente Techniken zur DOM-Navigation“?
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 jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery 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
- Erweiterte Attributselektoren
- Pseudo-Klassen und benutzerdefinierte Selektoren
- Effiziente Techniken zur DOM-Navigation