✅ HTML5 - DOM koka navigācija

Satura rādītājs

Dokumenta ietvaros HTML Mēs varam pārvietoties starp dažādiem elementiem, kas pieder DOM kokam, tāpēc mums ir hierarhiskā struktūra, un mēs varam izmantot vairākas metodes, ar kurām mēs varam tuvināties dokumentu attiecībām.
Virzieties DOM kokā
Kā jau minējām, navigāciju var veikt, izmantojot hierarhisko struktūru, kas vizualizē shēmu kā koku, tādā veidā mēs varam izturēties pret elementiem kā pret vecākiem, bērniem, brāļiem un māsām.
Tādējādi elementa meklēšanu var veikt, ievērojot meklēšanas filozofiju pēc attiecībām.
Apskatīsim pieejamās metodes, pirms pāriet uz praktisko pielietojumu:

· bērnu mezgli: Atgriež visus vecākā elementa pakārtotos elementus.

· pirmais bērns: Atgriež elementu, kas ir vecāka elementa pirmais bērns.

· hasChildNodes (): Atgriež patiesu vai patiesu, ja pašreizējam elementam ir pakārtotie mezgli.

· Pēdējais bērns: Atgriež dokumenta elementa pēdējo pakārtoto.

· nākamaisSibling: Atgriež brāļa / māsas elementu, ko nosaka pašreizējais HTML elements.

· parentNode: Atgriež pašreizējā HTML elementa vecāku elementu.

· previousSibling: Atgriež brāļa / māsas elementu pirms pašreizējā HTML elementa.

Kad mēs zinām, kādas metodes mums ir pieejamas, mēs redzēsim vienkāršu koda piemēru, ar kuru mēs sapratīsim, kas ir navigācija caur to. DOM koks.

Piemērs

Ir daudz dažādu augļu veidu - vien ir vairāk nekā 500 banānu šķirņu. Kad mēs pievienojam neskaitāmus ābolu, apelsīnu un citu plaši pazīstamu augļu veidus, mēs esam tūkstošiem izvēles priekšā.

Viens no interesantākajiem augļu aspektiem ir katrā valstī pieejamā šķirne. Es dzīvoju netālu no Londonas, rajonā, kas ir pazīstams ar saviem āboliem.

Vecāks Pirmais bērns Iepriekšējais Brālis Nākamais brālis

Ar šo kodu tiek sasniegta iespēja pārvietoties starp elementiem un pēc tam, kad tie ir nokrāsoti gaiši pelēkā krāsā, lai varētu atšķirt, kurā dokumenta daļā mēs atrodamies, redzēsim attēlā, kā mums tas jāredz mūsu pārlūkprogrammā:

Kā redzam, šāds elementu ievietošanas veids DOM mums palīdz, ja neesam pārliecināti par identifikatoriem vai ja tā ir dinamiska, bet definēta struktūra.
Ar to mēs pabeidzām šo apmācību, kurā mēs varējām meklēt elementus HTML dokumentā, nepaļaujoties uz identifikatoriem vai elementu nosaukumiem, vienkārši izmantojot to attiecības hierarhiskajā struktūrā.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu