DOM (Document Object Model)

DOM (Document Object Model) je standard, ki ga je definiral W3C (World Wide Web Consortium) in definira standard za dostop do dokumenta.

DOM Level 1 je bil definiran 1998, trenutna različica pa je DOM Level 4, ki pa je še razvojna različica. W3C DOM standard je razdeljen na tri dele:

• Core DOM - standardni model za vse tipe dokumentov
• XML DOM - standardni model za XML dokumente
• HTML DOM - standardni model za HTML dokumente

HTML DOM je standard objektnega modela in programskega vmesnika za HTML, ki definira:

• HTML elemente kot objekte
• lastnosti vseh HTML elementov
• metode za dostop do HTML elementov
• dogodke za vse HTML elemente

Ko se spletna stran naloži, brskalnik kreira HTML DOM (Document Object Model) dokumenta. HTML DOM je drevesna stuktura objektov.

Drevesna struktura HTML DOM objektov

Z HTML DOM objektnim modelom in JavaScriptom lahko kreiramo dinamične spletne strani HTML:

• JavaScript lahko spremeni vse HTML elemente spletne strani
• JavaScript lahko spremeni vse HTML atribute spletne strani
• JavaScript lahko spremeni vse CSS sloge spletne strani
• JavaScript lahko odstrani vse obstoječe HTML elemnte in atribute na spletni strani
• JavaScript lahko doda nove HTML elemnte in atribute na spletno stran
• JavaScript lahko kreira nove HTML dogodke na spletni strani
• JavaScript se lahko odziva na vse obstoječe HTML dogodke na spletni strani

JavaScript HTML DOM metode

HTML DOM metode so akcije, ki jih izvedemo na HTML elementih, HTML DOM lastnosti pa so vrednosti, ki jih lahko postavimo ali spremenimo.

<p id="primer"></p> 
<script> 
   document.getElementById("primer").innerHTML = "Izpis besedila."; 
</script>

V zgornjem primeru je getElementById metoda, innerHTML pa lastnost.

Najpogosteje do HTML elementa dostopamo z lastnostjo id.

V zgornjem primeru tako metoda getElementById uporabi lastnost id="primer", da najde element, z lastnostjo innerHTML pa dostopimo do vsebine HTML elementa (v našem primeru odstavka p) in mu spremenimo vsebino.