JavaScript DOM

DOM – Document Object Model

DOM predstavlja dogovoren način pristupanja elementima web strane.

DOM svaki element na stranici posmatra kao node i omogućava (u ovom slučaju Java Scriptu) da tom elementu pristupi u cilju njegove modifikacije. U ovom modelu postoji i hijerarhija pa je moguće utvrditi šta je nekom elementu “roditelj” ili “dete”. Možda će biti lakše da pogledamo primer HTML koda jedne web strane (levo) i slikovit prikaz tog istog dokumenta u strukturi DOM-a (desno):

3-java-script-dom-model

Na levoj strani je jednostavna html strana. Na desnoj je njena hijerarhijska predstava. Svi elementi predstavljeni u hijerarhiji nazivaju se nodovi i svaki od njih poseduje podatke o tome ko mu je roditelj a ko dete. Na primer, roditelj element za BODY node je HTML node dok su mu deca H1, P i UL.

Čemu nam ovo služi?

Pa, putem poznavanja DOM strukture HTML web strane, moguće je izvršiti razne akcije nad elementima te iste strane. Neki od primera šta je moguće uraditi:

  • saznati tekst title taga
  • uzeti drugi paragraf <p>
  • uzeti treći link u meniju i sakriti ga sa display:none;
  • promeniti pozadinsku sliku svih paragrafa sa klasom “vazan”
  • uzeti sve li elemente u poslednjoj neuredjenoj listi
  • pronaći sliku sa id-jem logo i pomeriti je 40px levo
  • promeniti neki link tako da inicira java script funkciju kada se na njega klikne
  • kreirati novo neuredjenu listu i staviti je izmedju drugog i trećeg paragrafa

U DOM-u postoji preko 10 tipova nodova ali oni koji su nama od najvećeg značaju su: ELEMENT, ATRIBUT i TEXT.

Kako bi stvari bile jasnije, atribut i tekst su “podelementi” noda ELEMENT. Daćemo primer sva tri tipa noda kroz jedan primer:

<a href=’http://www.google.com’ alt=’Sajt Google-a’>Idi na Google</a>

U ovom primeru ELEMENT node je sam <a> tag, a njegovi “podnodovi” su :

ATRIBUT nodovi – href=’http://www.google.com’ I alt=’Sajt Google-a’

TEXT nod je sam tekst ispisan u ekranu pretraživača – “Idi na Google

Drugi primer prikazan je na slici ispod:

4-java-script-dom-model-nodovi

Ovde imamo ELEMENT nod UL koji sadrži ATRIBUT node id ali ne i text node. Zašto? Zato što u okviru UL taga tekst nije ni predvidjen.

Dalje imamo stavke neuredjene liste <li> koje same za sebe predstavljaju ELEMENT nodove, sa svojim TEXT nodovima. Oni, za razliku od ul ELEMENT noda u ovom slučaju nemaju ATRIBUT nod, mada je teorijski moguće.
Kako dolazimo do elementa na kome želimo da radimo?

Prvo pitanje koje sebi postavljamo je da li je element jedinstven po nečemu? U slučaju primera iznad, vidimo da je UL element jedinstven po atributu id. Ukoliko, kao u ovom slučaju, imamo id koji možemo da iskoristimo za targetiranje, sintaksa će izgledati ovako:

document.getElementById(‘optionList’);

Ovde treba objasniti službenu reč document. Ona predstavlja najviši element u DOM hijerarhiji web stranice, tj. možemo je posmatrati kao root element ili koreni element DOM-a.

Da li nam je gornji izraz dovoljan za manipulaciju? Odgovor je-ne. Ono što radimo je da kreiramo promenljivu i u nju smeštamo sadržaj gornjeg izraza

var lista = document.getElementById(‘optionList’);

Iako kreiramo promenljivu, ovako kreirana promenljiva ne sadrži odredjenu “vrednost” već pre predstavlja pointer ka specifičnom mestu u HTML dokumentu čiji je sadržaj ili atribute moguće menjati kao i njegove roditelj ili dete elemente.

Šta kada element nije jedinstven?

U slučaju da html element nema pridružen id, moguće je pristupiti elementima preko imena tagova. Tada sintaksa izgleda ovako:

document.getElementsByTagName(‘<p>’);

i ako kao i u prethodnom primeru ovaj izraz pridružimo “promenljivoj” :

var niz_paragrafa= document.getElementsByTagName(‘<p>’);

promenljiva niz_paragrafa će ustvari biti Array (niz) čiji će prvi p tag koji se nalazi u dokumentu biti pridružen kao prvi član niza – niz_paragrafa[0], drugi p tag kao drugi član niza – niz_paragrafa[1], itd.

 

NAPOMENA: Nije obavezno koristiti samo document kako bi došli hijerarhijski do traženog elementa. Moguće je doći do roditelja elementa koji tražimo. Primer na slici:

5-java-script-dom-model-nodovi-primer

Želimo da pristupimo svim li elementima koji se nalaze u okviru neuredjene liste sa id-jem abc. To možemo uraditi na sledeći način:

Prvo “uhvatimo” tu listu pa zatim zatražimo sve njene podelemente:

var lista=document.getElementById(‘abc’);

var clanovi_liste=lista.getElementsByTagName(‘li’);

Ovako napisano, dolazimo do traženih elemenata bez uzimanja elemenata li iz uredjene liste (ol).

 

Kako čitamo atribute elementa?

Ako pogledamo jednostavan primer:

<img src=”slika.jpg” alt=”Neka slika” style=”color:red;background-color:blue;”>

čitanje vrednosti atributa izvršićemo sledećom komandom:

getAttribute(‘alt’);

Ukoliko želimo da postavimo vrednost nekog atributa koristimo:

setAttribute(‘alt’,’Neki drugi opis’);

Pogledajmo konkretan html kod:

<html>
<head>
<title>Java Script DOM</title>
</head>
<body>
<h1 id=’prvi_naslov’>Java Script DOM model</h1>
<p id=”prvi”>Ovde cemo pojasniti sta i kako</p>
       <img id=”logo” src=”js_logo.png” alt=”Ovo je logo PHP-a” width=”300″ height=”246″>
<ul>
<li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treca stavka</li>
</ul>
</body>
</html>

Kako dodajemo atribut elementu img?

document.getElementById(‘logo’).setAttribute(‘align’,’right’);

Ovim smo dodali atribut align sa vrednošću right (align=”right”) u okviru img taga i time sliku poravnali sa desnom stranom .

 

Ako hoćemo da pročitamo sadržaj alt taga slike js_logo.png, to ćemo uraditi kao:

alert(document.getElementById(‘logo’).getAttribute(‘alt’));

ili ako bi želeli da sa tom vrednošću nešto uradimo, smestili bi je u promenljivu:

var opis_slike=document.getElementById(‘logo’).getAttribute(‘alt’);

Kako menjamo tekst unutar taga?

Uzećemo primer iz gornjeg html dokumenta:

<p id=”prvi”>Ovde cemo pojasniti sta i kako</p>

Ovde želimo da umesto teksta “Ovde cemo pojasniti sta i kako” stoji tekst “Tesko da cemo uspeti”. To radimo sledećom komandom:

 

document.getElementById(‘prvi’).innerHTML=’Tesko da cemo uspeti';

Kako promeniti tekst elementa unutar niza?

Daćemo jednostavan primer:

<ul id=”lista”>
         <li>Prva stavka</li>
         <li>Druga stavka</li>
<li>Treca stavka</li>
       </ul>

Sadržaj unutar druge stavke liste promenićemo kao:

var stavke=document.getElementsByTagName(‘li’);
stavke[‘1′].innerHTML=’Druga ali izmenjena stavka';

Za slučaj da na strani postoje i druge liste, a mi želimo da promenimo samo stavku liste sa id-jem lista, onda bi to uradili kao:

var lista=document.getElementById(‘lista’);
var stavke=lista.getElementsByTagName(‘li’);
stavke[‘1′].innerHTML=”Druga ali izmenjena stavka”;

Kako u okviru DOM-a kreirati elemente, njihov sadržaj i umetnuti ih na mesto na koje želimo?

Uzećemo primer liste iz prethodnog primera:

<ul id=”lista”>
         <li>Prva stavka</li>
<li>Druga stavka</li>
<li>Treca stavka</li>
<!– ovde želimo da umetnemo četvrtu stavku liste –>
</ul>
 

Procedura je sledeća:

  1. Prvo kreiramo novi element koji će se nalaziti u okviru dokumenta, tj. web strane ali ga ne vezujemo za listu. Stavljamo ga u promenljivu koju ćemo kasnije upotrebiti za pridruživanje teksta koji će se nalaziti unutar novog li taga. Kod je sledeći:

var novi_element=document.createElement(“li”);

  1. Zatim kreiramo njegov sadržaj korišćenjem komande za kreiranje text node-a – ne innerHTML! Novi tekstualni nod stavljamo u promenljivu koju ćemo kasnije upotrebiti za pridruživanje “roditelju” koji je u ovom slučaju li tag.

var tekst_novog_elementa=document.createTextNode(“Sadrzaj cetvrte dodate stavke”);

  1. U sledećem koraku pridružujemo novoformirani text node novoformiranog roditelju elementu li (tekst se u DOM-u i posmatra kao dete elementa u okviru koga se nalazi)

novi_element.appendChild(tekst_novog_elementa);

  1. U poslednjem koraku “grabimo” element kome će novi element biti pridružen i dodeljujemo mu ga kao dete

document.getElementById(“lista”).appendChild(novi_element);

Kako da ga umetnemo na odredjeno mesto a ne kao poslednjeg u nizu?

Ako pogledamo prethodni primer, videćemo da nismo imali bas previše kontrole nad tim gde tačno umećemo novokreirani element. U slučaju da imamo potrebu da element stavimo na tačno odredjeno mesto, u pomoć nam dolazi komanda insertBefore.

U našem slucaju, hoćemo da ga stavimo tako da novi element bude na drugoj poziciji.

Postupak je u delu kreiranja elementa isti:

var novi_element=document.createElement(“li”);
var tekst_novog_elementa=document.createTextNode(“Sadrzaj cetvrte dodate stavke”);
novi_element.appendChild(tekst_novog_elementa);
 

Postupak umetanja je drugačiji u smislu što prvo moramo da definišemo mesto ispred koga umećemo element a onda to i uradimo. U ovom slučaju, prvo ćemo pronaći sve li elemente i smestiti ih u promenljivu:

Prvo kreiramo pointer ka listi koja nas zanima, u ovom slučaju lista sa id-jem lista. Kreiramo promenljivu sa istim imenom.

var lista=document.getElementById(‘lista’);

Zatim izaberemo stavku ispred koje hoćemo da umetnemo novu. [1] na kraju izraza govori da hoćemo samo element li na drugoj poziciji:

var stavka=lista.getElementsByTagName(‘li’)[1];

Na kraju, sintaksa za umetanje govori da u listu sa id-jem lista, ispred elementa definisanog kao promenljiva stavke ubacimo element koji se zove novi_element.

lista.insertBefore(novi_element,stavke);

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn