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:

_images/table.gif

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

_images/dom.gif

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 bez atributa

To možemo ilustrovati sledećom slikom:

_images/blok-html.png

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:

_images/nodes-traversal.png

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, u ovom slučaju drugom paragrafu
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>
      <p>U ovom primeru koristimo addEventListener() metodu da povežemo click događaj za dugme.</p>
      <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 pogledate u HTML DOM Events

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