Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

DOM (Document Object Model)

HTML DOM je programski vmesnik, s katerim lahko JavaScript dostopa do dokumenta HTML in ga spreminja. Brskalnik naloženi dokument predstavi kot drevesno strukturo vozlišč, zato lahko z JavaScriptom poiščemo elemente, beremo in spreminjamo njihove lastnosti, vsebino, atribute, sloge ter se odzivamo na dogodke. Sodobna razlaga temelji na živem standardu DOM, zato danes praviloma ne govorimo več o “trenutni različici DOM Level 4” kot o zaključeni izdaji, ampak o sproti vzdrževanem standardu.

Pomni: Objekt document je vstopna točka v vsebino spletne strani. Z njim dostopamo do elementov dokumenta in jih spreminjamo.

Osnovna pravila

  • DOM dokument predstavlja kot drevo vozlišč, v katerem je vsak element del celotne strukture strani.
  • Z JavaScriptom lahko elemente poiščemo, beremo njihove lastnosti in jih spreminjamo.
  • Metode izvajajo dejanja, lastnosti pa vsebujejo ali nastavljajo vrednosti.
  • Za iskanje elementa z enoličnim id pogosto uporabimo metodo getElementById().
  • Pri vstavljanju navadnega besedila je praviloma primernejša lastnost textContent, pri vstavljanju kode HTML pa innerHTML.
Drevesna struktura HTML DOM objektov

Drevesna struktura HTML DOM objektov

Primerjave

Metode in lastnosti HTML DOM

HTML DOM metode so dejanja, ki jih izvedemo nad dokumentom ali njegovimi elementi, lastnosti pa predstavljajo podatke, ki jih lahko preberemo ali spremenimo. V spodnjem primeru je getElementById() metoda, s katero poiščemo element, textContent pa lastnost, s katero nastavimo njegovo besedilno vsebino.

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

Če element še nima nastavljenega enoličnega id, lahko uporabimo tudi metodo querySelector(), ki poišče prvi element glede na podani izbirnik CSS.

<p class="opomba">DOM je uporaben.</p>
<script>
  document.querySelector(".opomba").textContent = "DOM je zelo uporaben.";
</script>

textContent in innerHTML

Lastnost textContent uporabljamo takrat, ko želimo nastaviti ali prebrati navadno besedilo. Lastnost innerHTML pa uporabljamo takrat, ko želimo v element vstaviti tudi oznake HTML. Zato ti dve lastnosti nimata povsem istega namena.

element.textContent = "Pozdrav";

element.innerHTML = "<strong>Pozdrav</strong>";

Pri navadnem besedilu je praviloma primernejša uporaba textContent, ker je zapis jasnejši in varnejši. Lastnost innerHTML je smiselna takrat, ko želimo vstaviti dejansko strukturo HTML.

<p id="primer1"></p>
<p id="primer2"></p>

<script>
  document.getElementById("primer1").textContent = "<strong>Pozdrav</strong>";
  document.getElementById("primer2").innerHTML = "<strong>Pozdrav</strong>";
</script>

Pozor: Lastnost innerHTML obravnava niz kot kodo HTML. Zato ni primerna za nekritično vstavljanje nepreverjenih podatkov. Kadar želimo prikazati le navadno besedilo, je praviloma boljša izbira textContent.

Priporočila

  • Za enolično označene elemente pogosto uporabi getElementById().
  • Pri navadnem besedilu praviloma uporabljaj textContent.
  • innerHTML uporabljaj le takrat, ko dejansko želiš vstaviti strukturo HTML.
  • Elemente poimenuj pregledno, da je njihova vloga v kodi jasna.
  • Spremembe v DOM uvajaj premišljeno in postopno, da je koda lažje razumljiva in preverljiva.

Pomni: Če elementa ni mogoče najti, metoda getElementById() vrne null. Zato je koristno preveriti, ali element v dokumentu res obstaja.

Pogoste napake

  • Metoda in lastnost se obravnavata kot isti pojem, čeprav metoda izvaja dejanje, lastnost pa vsebuje ali nastavlja vrednost.
  • Za navadno besedilo se uporabi innerHTML, čeprav je primernejša lastnost textContent.
  • Predpostavi se, da ima več elementov lahko enak id, kar oteži pravilno iskanje elementa.
  • Koda poskuša spreminjati element, ki v dokumentu ne obstaja, zato pride do napake pri dostopu do lastnosti.
  • DOM se razlaga kot zastarel zaprt standard različic, namesto kot sodoben sproti vzdrževan standard in nabor API-jev.
Nazaj
Naprej