HTML5 - DOM medžio navigacija

Turinys
Dokumento viduje HTML Mes galime naršyti tarp skirtingų elementų, priklausančių DOM medžiui, todėl turime hierarchinę struktūrą ir galime naudoti kelis metodus, kuriais galime kreiptis į dokumentų santykius.
Naršykite DOM medyje
Kaip minėjome, navigaciją galima atlikti per hierarchinę struktūrą, vizualizuojančią schemą kaip medį, tokiu būdu mes galime traktuoti elementus kaip tėvus, vaikus, brolius ir seseris.
Tokiu būdu elemento galima ieškoti vadovaujantis paieškos pagal santykius filosofija.
Prieš pereidami prie praktinių programų, pažiūrėkime galimus metodus:

· vaiko mazgai: Grąžina visus pirminio elemento antrinius elementus.

· pirmas vaikas: Grąžina elementą, kuris yra pirmasis pirminio elemento antrinis elementas.

· hasChildNodes (): Grąžina true arba true, jei dabartiniame elemente yra antrinių mazgų.

· Paskutinis vaikas: Grąžina paskutinį dokumento elemento antrinį elementą.

· kitasSibling: Grąžina brolio ir sesers elementą, apibrėžtą dabartiniu HTML elementu.

· parentNode: Grąžina dabartinio HTML elemento pirminį elementą.

· previousSibling: Grąžina brolio / sesers elementą prieš dabartinį HTML elementą.

Kai žinosime, kokius metodus turime, pamatysime paprastą kodo pavyzdį, su kuriuo suprasime, kas yra navigacija. DOM medis.
 Pavyzdys 

Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.

Vienas iš įdomiausių vaisių aspektų yra kiekvienoje šalyje prieinama įvairovė. Aš gyvenu netoli Londono, rajone, kuris yra žinomas dėl savo obuolių.

Tėvas Pirmasis vaikas Anksčiau Sesuo Kitas brolis


Šiuo kodu pasiekiama galimybė naršyti tarp elementų ir, kai jie nuspalvina juos šviesiai pilka spalva, kad būtų galima atskirti, kurioje dokumento dalyje mes esame, pažiūrėkime paveikslėlyje, kaip turėtume jį matyti savo naršyklėje:

Kaip matome, toks elementų išdėstymo būdas DOM padeda mums, kai nesame tikri dėl identifikatorių arba kai tai yra dinamiška, bet apibrėžta struktūra.
Tuo baigėme šį vadovėlį, kuriame galėjome ieškoti elementų HTML dokumente, nesiremdami identifikatoriais ar elementų pavadinimais, tiesiog naudodami jų ryšį hierarchinėje struktūroje.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką

Padėsite svetainės plėtrą, dalintis puslapį su draugais

wave wave wave wave wave