✅ HTML5 - DOM-Baumnavigation

Inhaltsverzeichnis

Innerhalb eines Dokuments HTML Wir können zwischen den verschiedenen Elementen, die zum DOM-Baum gehören, navigieren, dafür haben wir die hierarchische Struktur und können mehrere Methoden verwenden, mit denen wir uns den Beziehungen der Dokumente annähern können.
Navigieren Sie im DOM-Baum
Wie bereits erwähnt, kann die Navigation durch die hierarchische Struktur erfolgen, die das Schema als Baum visualisiert, auf diese Weise können wir die Elemente als Eltern, Kinder, Geschwister behandeln.
Damit kann die Suche nach einem Element nach der Philosophie einer Suche nach Beziehung erfolgen.
Sehen wir uns die verfügbaren Methoden an, bevor wir zu den praktischen Anwendungen übergehen:

· untergeordnete Knoten: Gibt alle untergeordneten Elemente des übergeordneten Elements zurück.

· erstes Kind: Gibt das Element zurück, das das erste untergeordnete Element eines übergeordneten Elements ist.

· hasChildNodes(): Gibt true oder true zurück, wenn das aktuelle Element untergeordnete Knoten hat.

· letztes Kind: Gibt das letzte untergeordnete Element eines Elements im Dokument zurück.

· nächstesGeschwister: Gibt das vom aktuellen HTML-Element definierte gleichgeordnete Element zurück.

· Elternknoten: Gibt das übergeordnete Element des aktuellen HTML-Elements zurück.

· vorherigeGeschwister: Gibt das gleichgeordnete Element vor dem aktuellen HTML-Element zurück.

Sobald wir wissen, welche Methoden uns zur Verfügung stehen, sehen wir ein einfaches Codebeispiel, mit dem wir verstehen, worum es bei der Navigation geht. DOM-Baum.

Beispiel

Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.

Einer der interessantesten Aspekte von Obst ist die in jedem Land verfügbare Vielfalt. Ich lebe in der Nähe von London, in einer Gegend, die für ihre Äpfel bekannt ist.

Eltern Erstes Kind Vorheriges Geschwister Nächstes Geschwister

Was dieser Code erreicht, ist, zwischen Elementen navigieren zu können, und sobald er sie hellgrau schattiert, um unterscheiden zu können, in welchem Teil des Dokuments wir uns befinden, sehen wir im Bild, wie wir es in unserem Browser sehen sollten:

Wie wir sehen, hilft uns diese Art der Platzierung der Elemente im DOM, wenn wir uns der Bezeichner nicht sicher sind oder wenn es sich um eine dynamische, aber definierte Struktur handelt.
Damit haben wir dieses Tutorial abgeschlossen, in dem wir nach Elementen in einem HTML-Dokument suchen konnten, ohne sich auf Bezeichner oder Elementnamen zu verlassen, indem wir einfach ihre Beziehung in der hierarchischen Struktur verwenden.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben