DOM¶

Šta je DOM?¶

DOM je skraćenica od Document Object Model, a predstavlja interfejs za programiranje (API) kojim se javaScript programima omogućava da komuniciraju sa HTML dokumentima i njihovim elementima.

Osnovni DOM objekat je HTML dokument čiju strukturu verno preslikava u OO API.

Na primer, posmatrajmo sledeći HTML dokument:

<table>
  <tbody>
    <tr>
      <td>Shady Grove</td>
      <td>Aeolian</td>
    </tr>
    <tr>
      <td>Over the River, Charlie</td>
      <td>Dorian</td>
    </tr>
  </tbody>
</table>

Ovom dokumentu odgovara sledeća struktura stabla:

Generalno govoreći svaka html stranica, prema DOM modelu ima sledeću strukturu:

Sa DOM-om, JavaScript ima mogućnost da kreira dinamičke HTML stranice:

Da menja sve elemente na HTML stranici.
Da menja sve atribute na HTML stranici.
Da menja sve CSS stilove na HTML stranici.
Da briše postojeće elemente i atribute na HTML stranici.
Da dodaje nove HTML elemente i atribute na stranici.
Da reaguje na sve postojeće HTML događaje na stranici.
Da kreira nove HTML doga]aje na stranici.

DOM objekti¶

U DOM-u, HTML dokument predstavlja kolekciju JavaScript objekata. Ovi objekti imaju svojstva (properties), atribute i metode kojima se može pristupati u JavaScript programima.

Na primer u sledećem html dokumentu:

<html>
  <head>
    <title>Moja stranica</title>
  </head>
  <body>
    <p id="p1">Prvi paragraf</p>
    <p class="c1">Drugi paragraf</p>
  </body>
</html>

imamo sledeće objekte

objekat document koji sadrži:
- objekat head koji sadrži:
  
  title
- objekat body koji sadrži:
  
  objekat p sa atributom id
  
  objekat p sa atributom class

To možemo ilustrovati sledećom slikom:

Pristupanje objektima¶

Objektima koji su deo dokumenta može se pristupiti na nekoliko načina, a najčešće korišćeni su:

Putem identifikatora (id atributa) na sledeći načina:

document.getElementById("p1")          // za pristup prvom paragrafu iz gornjeg primera

Putem naziva elementa (taga) kada se dobija lista svih elemenata:

document.getElementsByTagName("p")    // za pristup svim paragrafima gornjeg primera

Putem klase kojoj elementi pripadaju, kada se dobija lista svih elemenata iz zadate klase:

document.getElementsByClassName("c1") // za pristup drugom paragrafu iz gornjeg primera

Objektima se može pristupati i prema poziciji u stablu:

parentNode, nextSibling, prevSibling, firstChild, lastChild

Sledeća slika ilustruje ovaj način pristupa:

Moderni brouzeri podržavaju i selekciju elemenata na bazi css selektora, pomoću metoda querySelecor i querySelectorAll.

Tako se za gornji primer html documenta može pristupati elementima i ovako:

document.querySelector("#p1")   // za pristup prvom paragrafu iz gornjeg primera
document.querySelector(".c1")   // za pristup prvom elementu klase c1
document.querySelectorAll("p")  // za pristup svim paragrafima gornjeg primera

DOM događaji¶

DOM događaji omogućavaju JavaScript-u da registruje pojavu neke promene u dokumentu. Za svaku takvu promenu JavaScript može da definiše funkciju koja će je opslužiti. Funkcije koje opslužuju događaje nazivaju se hendlerima.

DOM događaji mogu se svrstati u nekoliko kategorija:

Događaji povezani sa mišem: onclick, ondblclick, onmouseover itd…
Događaje povezane sa tastaturom: onkeydown, onkeypress, onkeyup
Događaje povezane sa objektima: onload, onunload, onresize itd…
Događaje povezane sa formama: onchange, onsubmit itd…
Događaje povezane sa pomeranjem (drag) elemenata: ondrag, ondrop, ondragstart, itd…
Događaje povezane sa klipovima (clipboard); oncut, onpaste, oncopy
Događaje povezane sa štampanjem: onafterprint, onbeforeprint
Događaje povezane sa medijima: onplay, onpause, onended itd…
Događaje povezane sa animacijom: animationstart, animationend, animationiteration
Događaje povezane sa tranzicijom: transitionend
Događaje koje šalje server: onerror, onmessage, onopen
Događaje povezane sa dodirima na ekranu (touch): ontouchstart, ontouchmove, ontouchend, ontouchcancel
Ostali događaji: ononline, onoffline, onwheel itd…

Opsluživanje DOM događaja ( Event handlers )¶

Jedan standardan način za registrovanje i opsluživanje DOM događaja je dodavanje osluškivača događaja (event listener).

Posmatrajmo sledeći primer:

<!DOCTYPE html>
<html>
  <body>
    <!--U ovom primeru koristimo addEventListener() metodu
        da povežemo click događaj za dugme.-->

    <button id="mojeDugme">Klikni me</button>
    <p id="demo"></p>
    <script>

      document.getElementById("mojeDugme").addEventListener("click", prikaziDatum);

      function prikaziDatum() {
        document.getElementById("demo").innerHTML = Date();
      }

    </script>
  </body>
</html>

U ovom primeru je dugmetu “mojeDugme” pridružen osluškivač događaja, tako da kada god se klikne na dugme poziva se funkcija “prikaziDatum”.

Sintaksa za pridruživanje događaja i funkcija koje ga opslužuju je sledeća:

element.addEventListener(event, function, useCapture);

Parametar event kazuje o kojem se događaju radi a parametar function kazuje koja če funkcija biti pozvana da opsluži događaj. Parametar useCapure, koji je opcion ( može se izostaviti ), i odnosi se na redolsed opsluživanja kada se događaj desi u elementu koji je deo drugog elementa, a za oba elementa je registrovan isti događaj.

Funkcija koja opslužuje događaj dobija argument koji je objekat koji opsiuje detalje događaja kao što su x i y koordinata miša kada je kliknut i slično. Na primer:

element.onclick = function(event) {
    console.log(event.x, event.y)
}

Klikom na element dobićemo x i y poziciju elementa.

Kompletan opis događaja možete da vidite u HTML DOM Events

Više o DOM-u možete da saznate na W3School DOM tutorijalu.