✅ HTML5 - Nawigacja w drzewie DOM

Spisie treści

W dokumencie HTML Możemy poruszać się między różnymi elementami należącymi do drzewa DOM, do tego mamy strukturę hierarchiczną i możemy użyć wielu metod, za pomocą których możemy podejść do relacji dokumentów.
Poruszaj się po drzewie DOM
Jak wspomnieliśmy, nawigacja może odbywać się poprzez hierarchiczną strukturę wizualizującą schemat jako drzewo, w ten sposób możemy traktować elementy jako rodziców, dzieci, rodzeństwo.
Dzięki temu poszukiwanie elementu może odbywać się zgodnie z filozofią poszukiwania przez relację.
Zobaczmy dostępne metody, zanim przejdziemy do praktycznych zastosowań:

· węzły potomne: Zwraca wszystkie elementy podrzędne elementu nadrzędnego.

· pierworodny: Zwraca element, który jest pierwszym dzieckiem elementu nadrzędnego.

· hasChildNodes (): Zwraca true lub true, jeśli bieżący element ma węzły podrzędne.

· ostatnie dziecko: Zwraca ostatnie dziecko elementu w dokumencie.

· następny Rodzeństwo: Zwraca element równorzędny zdefiniowany przez bieżący element HTML.

· węzeł rodzicielski: Zwraca element nadrzędny bieżącego elementu HTML.

· poprzedniRodzeństwo: Zwraca element równorzędny przed bieżącym elementem HTML.

Gdy już wiemy, jakie metody mamy do dyspozycji, zobaczymy prosty przykład kodu, dzięki któremu zrozumiemy, o co chodzi w nawigacji. drzewo DOM.

Przykład

Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

Jednym z najciekawszych aspektów owoców jest odmiana dostępna w każdym kraju. Mieszkam niedaleko Londynu, w okolicy znanej z jabłek.

Rodzic Pierwsze dziecko Poprzednie Rodzeństwo Następne Rodzeństwo

To, co osiąga ten kod, to możliwość poruszania się między elementami, a gdy zaciemni je na jasnoszary, aby móc odróżnić, w której części dokumentu się znajdujemy, zobaczmy na obrazku, jak powinniśmy to zobaczyć w naszej przeglądarce:

Jak widać, ten sposób umieszczania elementów w DOM pomaga nam, gdy nie jesteśmy pewni identyfikatorów lub gdy jest to dynamiczna, ale zdefiniowana struktura.
Na tym zakończyliśmy ten samouczek, w którym byliśmy w stanie wyszukiwać elementy w dokumencie HTML bez polegania na identyfikatorach lub nazwach elementów, po prostu używając ich relacji w strukturze hierarchicznej.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt