HTML5 - DOM navigacija stablom

Sadržaj
Unutar dokumenta HTML Možemo se kretati između različitih elemenata koji pripadaju stablu DOM, za to imamo hijerarhijsku strukturu i možemo koristiti više metoda s kojima možemo pristupiti odnosima dokumenata.
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.
 Primjer 

Postoji 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
wave wave wave wave wave