Prvi koraci u Web DOM programiranju

Da bismo u JavaScriptu mogli da radimo sa HTML elementima, moramo ih "dovući" u naš program. HTML elementi su nam dostupni preko različitih kolekcija (npr. svi linkovi u dokumentu), hijerarhijskog stabla elemenata (elementi sa svojim podelementima), ili čak pojedinačno, preko jedinstvene identifikacije.

Kada tako "dohvatimo" HTML element, pomoću JavaScripta možemo da manipulišemo njime u svakom smislu. Ono što nas najpre zanima je kako da mu promenimo izgled (promenom inline CSS-a i klase elementa) i sadržaj (ubacivanjem novog HTML koda).

Pristup pojedinom HTML elementu

Ovde ćemo se pozabaviti poslednjim pomenutim načinom "hvatanja" HTML elementa sa stranice. Da bismo pristupili nekom HTML elementu, koristićemo metod getElementById(), objekta document.

Ovaj metod kao parametar ima identifikaciju elementa (kao tekstualnu vrednost). Identifikacija elementa je jedinstvena oznaka koju smo dodelili HTML elementu pod id parametrom.

Znači, ako u HTML-u označimo element na sledeći način:

<oznaka id="ident"> ...sadržaj elementa... </oznaka>

U JavaScriptu možemo pristupiti tom elementu na sledeći način:

document.getElementById("ident")

Ono što je bitno da shvatimo, je da je ceo ovaj "deo" referenca na elemenat iz dokumenta. To znači da možemo odmah da radimo sa nekim svojstvom ili metodom koji ima taj objekat, ili da "sačuvamo" referencu u nekoj promenljivoj.

Znači, sledeći kod, kojim se menja vrednost nekog svojstva ili poziva neki metod, ima smisla ako nam je elemenat potreban "jednokratno":

document.getElementById("ident").svojstvo = vrednost; document.getElementById("ident").metod();

Ovo je potpuno ista stvar, ali je bolje ako nameravamo još nešto da radimo sa elementom:

var objekat = document.getElementById("ident"); objekat.svojstvo = vrednost; objekat.metod();

U nastavku teksta ćete videti različite načine korišćenja ovog metoda.

CSS formatiranje elementa

Jednom kad smo dohvatili element iz HTML-a, možemo da radimo stvarno "svašta" sa njim. Osnovno je da mu promenimo izgled. Za to koristimo podobjekat style koji postoji u svim HTML elementima.

Ovaj podobjekat ima veliki broj svojstava koja pokrivaju praktično svaki CSS atribut. Vrednosti koje možemo da zadamo su tekstualnog tipa (stringovi).

elemenat.style.atribut = "vrednost";

CSS atributi sa kojima želimo da radimo se ne mogu tek tako zadati isto kao u CSS-u. Kao prvo, dobar broj atributa se sastoji iz više reči sa crticom između. Pošto crtica ("minus") u JavaScriptu (a i inače) označava oduzimanje, ne možemo koristiti takav naziv svojstva. Pravilo je da se u objektu style crtica eliminiše, a svaka nova reč počinje velikim slovom. Naziv svakog od ovih svojstava, obavezno počinje malim slovom.

NEISPRAVNO: elemenat.style.background-color elemenat.style.textalign ISPRAVNO: elemenat.style.backgroundColor elemenat.style.textAlign

Inače, zadavanje CSS formatiranja putem podobjekta style, ekvivalentno je zadavanju inline CSS-a, direktno u HTML elementu pomoću parametra style.

Promena CSS formatiranja

Ovde imamo jednostavan slučaj kada želimo da promenimo formatiranje dva DIV bloka. Ono što nam je bitno je da su oba identifikovana pomoću id parametra kao prvi i drugi.


  <div id="prvi">
    Prvi DIV blok.
  </div>
  <div id="drugi">
    Drugi DIV blok.
  </div>

U JavaScript delu želimo da promenimo samo boju pozadine prvog bloka, unosom nove vrednosti u svojstvo backgroundColor podobjekta style koji postoji u svim HTML elementima. Pristupamo elementu identifikovanom kao "prvi" korišćenjem metoda getElementById() objekta document. Rezultat ovog metoda je referenca na taj element, i možemo odmah da koristimo njegova svojstva i metode.


  document.getElementById("prvi").style.backgroundColor = "black";

  var blok = document.getElementById("drugi");
  
  blok.style.fontWeight = "bold";
  blok.style.border = "2px solid red";
  blok.style.borderRadius = "10px";

Zašto smo onda radili drugačije za drugi blok? Tu smo mu pristupili na isti način, ali umesto da ga odmah menjamo, zapamtili smo referencu u promenljivoj blok. Tek onda smo koristili razna svojstva objekta style da mu promenimo izgled.

Upravo to "razna svojstva" je i razlog zašto smo radili na ovaj način - program je čistiji (i brži) ako prvo zapamtimo referencu, pa onda radimo sa HTML elementom, umesto da mu stalno pristupamo po identifikaciji. Ovaj način je uvek bolji kada sa istim elementom treba da obavimo više od jedne stvari.

Klasa elementa

Ako treba da izvršimo puno promena u CSS formatiranju, možda je bolje da unapred napravimo novu klasu i da onda samo menjamo klasu elementa. Svakako bi to bio bolji način nego da radimo mnogobrojne izmene preko podobjekta style.

Klasu čitamo, odnosno menjamo pomoću svojstva className koje ima svaki HTML elemenat.

elemenat.className = "klasa";

Hover bez hovera

Hajde da pokušamo da napravimo efekat koji se u CSS-u lako postiže pseudoklasom :hover, ali samo pomoću JavaScripta.

Element koji se menja kada pređemo mišem preko njega je DIV blok sa dve moguće klase (.neaktivan kada miš nije iznad njega i .aktivan kada jeste). Ove dve klase smo, naravno, ranije definisali u CSS-u.

Samom elementu smo dodali dva događaja - onMouseOver koji poziva funkciju pali() i onMouseOut koji poziva funkciju gasi(). Za obe funkcije se prosleđuje sam objekat nad kojim je nastao događaj (this - sam DIV blok).

Inicijalno, ovaj element ima klasu neaktivan, pošto je "ugašeno stanje" ono kako treba da izgleda na početku.


  <style>
    .aktivan {...}
    .neaktivan {...}
  </style>
  
  <div onmouseover="pali(this)" onmouseout="gasi(this)" class="neaktivan">
    Sadržaj DIV bloka...
  </div>

U JavaScriptu imamo deklarisane ove dve funkcije koje dobijaju parametar elem (to je onaj this iz poziva funkcije, odnosno elemenat koji je aktivirao događaj). Ove dve funkcije su jako jednostavne - sve što rade je da menjaju klasu zadatom elementu elem, tako što menjaju njegovo svojstvo className koje predstavlja njegovu klasu.


  function pali(elem) {
    elem.className = "aktivan";
  }

  function gasi(elem) {
    elem.className = "neaktivan";
  }

Zašto bi iko pri zdravoj pameti koristio ovakav način umesto pseudoklase :hover? Moguće je da kada pređemo mišem preko nekog elementa treba da promenimo izgled ne tog, već nekog drugog elementa, što bi moglo da nam bude teško ili čak nemoguće preko CSS-a. U tom slučaju, DOM programiranje priskače u pomoć!

Sadržaj elementa

Osim izgleda, možemo promeniti i sadržaj nekog elementa. Ovo je moguće uraditi na više načina, ali umesto da se sada zadržavamo učeći "legalan" postupak, sve sa kreiranjem tekstualnih čvorova i podelemenata, naučićemo brz i "prljav" način.

Svaki HTML elemenat ima svojstvo innerHTML čija je vrednost tekstualni sadržaj elementa u obliku HTML koda. Ovo svojstvo se može čitati, ali i menjati, čime efektivno menjamo sadržaj bilo kog elementa.

elemenat.innerHTML = "HTML kod";

Promena sadržaja elementa

Recimo da u HTML kodu imamo elemenat kome želimo da promenimo sadržaj i to kada kliknemo na neki drugi DIV element. Tada se poziva se funkcija brojac(), sa parametrom 'blok', što je u stvari identifikacija elementa koji se menja.

Svaki put kada kliknemo na taj DIV blok, u bloku koji se menja treba da nam se ispiše koliko puta smo to uradili.


  <div onclick="brojac('blok')">
    <p>Kliknite ovde.</p>
  </div>
  <div id="blok">
    <p>Ovaj sadržaj se menja.</p>
  </div>

U JavaScript odeljku se ovim bavi funkcija brojac(). Kao parametar ident joj se prosleđuje identifikacija elementa koji se menja.


  var broj = 0;
  
  function brojac(ident) {
    broj++;
    
    var tx = '<p class="kliknuto">';
    tx += 'Ovaj element je kliknut ' + broj + ' puta.';
    tx += '</p>';
    
    document.getElementById(ident).innerHTML = tx;
  }

U ovom slučaju smo odlučili da u lokalnoj promenljivoj tx "napravimo" ceo HTML kod koji želimo da ubacimo u željeni element. Da bi program bio pregledniji, dodajemo HTML u tx-u iz nekoliko delova. Operator += služi za "nadodavanje" na već postojeću vrednost. Stringovi koji predstavljaju novi HTML su označeni apostrofima, zato što unutar njih imamo i neke navodnike.

HTML koji se tako formira je pasus klase "kliknuto" i tekstom "Ovaj element je kliknut X puta", gde X predstavlja broj puta koliko smo kliknuli na element. Da bi se prebrojalo, koristimo globalnu promenljivu broj u kojoj čuvamo koliko puta smo kliknuli. Zašto ovo mora da bude globalna promenljiva, a ne lokalna? Prosto - lokalna promenljiva gubi vrednost čim se funkcija završi. Na početku funkcije se ovaj brojač uvek poveća za jedan (operator ++).

Na kraju, tako formiran sadržaj u promenljivoj tx ubacujemo, pomoću svojstva innerHTML, u DIV element kome smo pristupili metodom getElementById() objekta document. Kao parametar smo zadali promenljivu ident, u kojoj se u ovom slučaju nalazi tekst "blok", koji je originalno prosleđen funkciji brojac().

Rad sa slikama

Prošli smo kroz neka svojstva koja imaju svi HTML elementi. Međutim, treba da znate da određeni elementi imaju i neke svoje specifičnosti. Na primer, slika, odnosno <img> elemenat osim do sada navedenih, ima i neka svojstva koja postoje samo za taj tip elementa

Na primer, svojstvo src sadrži putanju (URL) do slike. Ako menjamo ovo svojstvo, menjamo i sliku na stranici. Osim toga, postoje i svojstva width i height, koja kontrolišu širinu i visinu slike. Svojstvo src je tekstualno, a width i height su numerička.

slika.src = "URL"; slika.width = širina; slika.height = visina;

JavaScript i slike

U sledećem primeru radimo sa slikom koja je identifikovana kao "ilustracija".


  <img id="ilustracija" src="neka-slika.jpg" width="150" height="340" />

Pošto ćemo isprobati više stvari, referencu na sliku ćemo smestiti u promenljivu slika. Tako nećemo morati svaki put da je "dovlačimo" sa getElementById().


  var slika = document.getElementById("ilustracija");
  
  slika.src = "druga-slika.jpg";  // promena same slike
  slika.width = 125;              // promena širine slike
  slika.style.width = "180px";    // promena CSS širine elementa

Najpre smo promenili samu sliku, korišćenjem svojstva src, a onda i širinu, pomoću svojstva width. Može da vas zbuni to što svaki element omogućava i promenu dimenzija pomoću CSS-a (podobjekat style). Ni slika nije izuzetak, s tim što se onda njena "width dimenzija" gleda kao "realna" veličina slike, a CSS dimenzija kao "uvećana/umanjena" varijanta. Primetite razliku između načina kako se navode vrednosti. Za svojstvo width se zadaje numerički podatak (broj), a za style.width tekst koji predstavlja CSS metriku.

Naziv dokumenta

Evo nečeg jednostavnog. Pomoću JavaScripta možemo pročitati ili promeniti naziv dokumenta, odnosno podatak koji unosimo u <title> elementu u zaglavlju web stranice. Ovo je omogućeno preko svojstva title objekta document.

document.title = "novi naslov";

Dodavanje prefiksa na naziv dokumenta

Evo jednostavnog primera koji obuhvata i čitanje i promenu naziva dokumenta. Recimo da u HTML dokumentu imamo definisan neki naziv dokumenta, npr. "Potrebne stvari".


  <head>
    <title>Potrebne stvari</title>
    ...
  </head>

Pomoću JavaScripta možemo na taj naziv dodati neki prefiks, npr. "Ne". Napravićemo to tako da funkcioniše za bilo koji naziv dokumenta.


  document.title = "Ne" + document.title;

Kao što vidite, jako je jednostavno. Prvo kreiramo novi tekst koji se dobija spajanjem stringa "Ne" i naziva dokumenta kome pristupamo preko svojstva title objekta document (kako god da on glasi). Onda se taj novi tekst zadaje kao nova vrednost svojstva title.

Rezultat će u ovom slučaju biti "NePotrebne stvari".

URL stranice

Objekat window ima veliki broj svojstava, metoda i podobjekata. Praktično, sve sa čime radimo je deo objekta window. Osim objekta document, mogao bi da nam bude zanimljiv i objekat location, koji sadrži svojstva i metode vezane za URL stranice. Najvažnije nam je svojstvo href, koje sadrži sam URL stranice.

Ako promenimo vrednost ovog svojstva, nateraćemo web čitač da odmah "skoči" na novu stranicu. Praktično, kao da smo kliknuli na link.

location.href = "URL";

Link bez linka

Evo primera kako možemo da "isfoliramo" link na web stranici, bez pravog linka. U HTML delu imamo običan pasus, ali u njemu definisan događaj onclick, drugim rečima - šta se dešava kada korisnik klikne mišem na ovaj pasus.

To što se dešava je jedan-jedini poziv funkcije goWebnstudy().


  <p onclick="goWebnstudy()">
    WEBnSTUDY
  </p>

  function goWebnstudy() {
    location.href = "http://webnstudy.com";
  }

U JavaScript delu imamo deklaraciju same funkcije goWebnstudy(), koja je prilično jednostavna. Zadajemo novu vrednost svojstva href objekta location. Ta nova vrednost je URL na koji želimo da web čitač pređe. Efektivno, cela ova skalamerija je umesto običnog linka. Ovo je relativno beskoristan primer, pošto funkcija služi da se pozove uvek jedan te isti sajt.

Možda bi bilo bolje da koristimo parametar u pozivu funkcije i kroz njega odredimo koji URL treba da se otvori. Znači sada možemo napraviti i više ovakvih "lažnih linkova", s tim da svaki poziv funkcije prosleđuje drugačiji URL.

Primetite da smo koristili apostrofe za zadavanje URL-a, zato što je to tekstualni podatak, a poziv funkcije se već nalazi unutar navodnika. Da smo i URL naveli pod navodnicima, napravili bismo grešku - vrednost onclick parametra bi se prerano završila i glasila bi: "otvori(". Upravo zbog toga string literali u JavaScriptu mogu biti zadati pod navodnicima ili apostrofima - šta god nam u tom trenutku odgovara.


  <p onclick="otvori('http://webnstudy.com')">
    WEBnSTUDY
  </p>
  <p onclick="otvori('https://www.wikipedia.org')">
    Wikipedia
  </p>

U JavaScriptu se deklaracija funkcije samo malo menja. Funkcija sada ima parametar sajt kojim "hvata" zadati URL. Onda se href svojstvo menja tako što mu se zadaje vrednost zadatog parametra. Samim tim, web čitač može da "skoči" na bilo koju adresu, zadatu kao sajt.


  function otvori(sajt) {
    location.href = sajt;
  }

Ovo je jedan od najglupljih načina da se prave linkovi. Ovakav način je potpuno neopravdan sa stanovišta SEO prakse, pošto Internet pretraživači (poput Google-a) niti slede, niti indeksiraju ovakve "linkove". Sa druge strane, ako želite da sakrijete neki link od pretraživača i drugih botova, samo navalite.

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.