Krećite se po stablu DOM
Kao što smo spomenuli, navigacija se može vršiti kroz hijerarhijsku strukturu vizualizirajući shemu kao stablo, na taj način možemo tretirati elemente kao roditelje, djecu, braću i sestre.
Time se može tražiti element slijedeći filozofiju pretraživanja po odnosu.
Pogledajmo dostupne metode prije nego prijeđemo na praktične primjene:
· čvorovi djeteta: Vraća sve podređene elemente nadređenog elementa.
· prvo dijete: Vraća element koji je prvo dijete roditeljskog elementa.
· hasChildNodes (): Vraća true ili true ako trenutni element ima podređene čvorove.
· zadnje dijete: Vraća posljednje dijete elementa u dokumentu.
· nextSibling: Vraća element brata ili sestre definiran trenutnim HTML elementom.
· parentNode: Vraća roditeljski element trenutnog HTML elementa.
· previousSibling: Vraća bratski element prije trenutnog HTML elementa.
Kad saznamo koje metode imamo na raspolaganju, vidjet ćemo jednostavan primjer koda s kojim ćemo razumjeti o čemu se radi kroz navigaciju. DOM stablo.PrimjerPostoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.
Jedan od najzanimljivijih aspekata voća je sorta dostupna u svakoj zemlji. Živim u blizini Londona, u području poznatom po jabukama.
Roditelj Prvo dijete Prethodni brat Sljedeći brat / sestra
Ono što ovaj kôd postiže je da se možete kretati po elementima i kad ih zasjeni u svijetlosivoj boji kako biste mogli razlikovati u kojem se dijelu dokumenta nalazimo, da vidimo na slici kako bismo ga trebali vidjeti u svom pregledniku:
Kao što vidimo, ovaj način postavljanja elemenata unutar DOM -a pomaže nam kada nismo sigurni u identifikatore ili kada je riječ o dinamičkoj, ali definiranoj strukturi.
Time smo završili ovaj vodič, gdje smo mogli tražiti elemente u HTML dokumentu bez oslanjanja na identifikatore ili nazive elemenata, jednostavno koristeći njihov odnos u hijerarhijskoj strukturi.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod