Sadržaj
U prvom dijelu ovog vodiča vidjeli smo kako je DOM strukturiran i kako funkcionira, u ovome ćemo nastaviti raditi s njim kako bismo proširili njegove funkcionalnosti i mogli manipulirati svim elementima našeg HTML dokumenta.Rad s DOM -om
Za pristup objektu dokumenta koristimo globalnu varijablu dokumenta; Ova je varijabla jedan od ključnih objekata koje preglednik stvara za nas, budući da putem tog objekta dokumenta možemo pristupiti informacijama o dokumentu u cjelini i daje nam individualni pristup svakom objektu dokumenta.
Kao i uvijek, pogledajmo primjer s kojim možemo uskladiti teoriju koju poznajemo s načinom na koji se primjenjuje u stvarnosti.
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.
Kôd s kojim koristimo SUNCE Prilično je kratak i jednostavan, međutim bilježi različite namjene koje mu možemo dati, objasnit ćemo kod dio po dio da vidimo kako smo koristili objekte.
Jedna od najosnovnijih radnji koje možemo upotrijebiti je dobivanje informacija iz HTML dokumenta s kojim radimo, tako da prvi redak koji smo stavili u naš kôd čini upravo to i možemo ga vidjeti:
document.writeln ("
URL: "+ document.URL);
U ovom slučaju čitamo vrijednost nekretnine dokument.URL, koji vraća URL trenutnog dokumenta, odnosno URL koji je preglednik koristio za učitavanje dokumenta u kojem imamo kôd.
Također vidimo kako koristimo writeln metodu:
document.writeln ("
URL: "+ document.URL);
Ova metoda jednostavno dodaje sadržaj na kraj našeg HTML dokumenta, u ovom konkretnom slučaju počinjemo dodavanjem oznake
i zatim svojstvo URL, s tim smo već izmijenili strukturu i sadržaj DOM -a.
Sljedeće što smo učinili je odabir svih elemenata koji imaju oznaku p u dokumentu, za to koristimo sljedeći redak:
var elems = document.getElementsByTagName ("p");
Kako vidimo metodu getElementsByTagName On služi našoj svrsi, u isto vrijeme sve što ova metoda prikuplja dodjeljujemo varijabli elems.
U sljedećem retku radimo iteraciju nad varijablom elems, dobivajući dodijeljene objekte, za svaki koji ćemo ponoviti dodat ćemo redak teksta s njegovim ID -om, a kasnije ćemo promijeniti njegove atribute kako bismo izmijenili njegov izgled .
for (var i = 0; i <elems.length; i ++) {document.writeln ("ID elementa:" +elems [i] .id); elems [i] .style.border = "srednje dvostruko crno"; elems [i] .style.padding = "4px"; }
Kao što vidimo, svakom elementu koji smo pohranili u naše promjenjive elemente dodamo obrub, a dodatno dodajemo i padding.
Nakon svega ovoga, pogledajmo konačno kako sve ovo izgleda u pregledniku:
POVEĆAJTE
Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod 
