HTML DOM opisuje dokument HTML kot drevesno strukturo vozlišč. Vsak element, besedilo, komentar in dokument sam imajo v tej strukturi svojo vlogo. Takšna predstavitev omogoča, da JavaScript po dokumentu krmari, bere lastnosti vozlišč ter jih po potrebi spreminja, dodaja ali odstranjuje. Pri sodobni razlagi je pomembno razlikovati med elementi, besedilnimi vozlišči in celotnim dokumentom, saj nimajo vsa vozlišča enakih lastnosti in pomena.

Pomni: Lastnost childNodes vključuje tudi besedilna vozlišča in komentarje, ne le elementov. Zato rezultat ni vedno enak kot pri lastnosti children.

Osnovna pravila

Dokument HTML je v DOM predstavljen kot drevo vozlišč.
Vsak element je vozlišče, besedilo znotraj elementa pa je praviloma ločeno besedilno vozlišče.
Med vozlišči obstajajo razmerja, kot so starš, otrok, sorodnik, prednik in potomec.
Za krmarjenje med vozlišči uporabljamo lastnosti, kot so parentNode, childNodes, firstChild, lastChild, nextSibling in previousSibling.
Pri sodobni kodi je za delo z besedilom pogosto preglednejša lastnost textContent.

Vozlišča v HTML DOM

V DOM dokumentu so najpogostejša naslednja vozlišča:

objekt document, ki predstavlja celoten dokument
elementna vozlišča, na primer <h1>, <p> ali <ul>
besedilna vozlišča, ki vsebujejo besedilo znotraj elementov
komentarji, kadar so v dokumentu zapisani

Drevesna struktura HTML DOM v HTML dokumentu

Drevesna struktura HTML DOM v dokumentu HTML

JavaScript lahko z vozlišči bere podatke, krmari po drevesu in spreminja dokument. Pomembno je, da pri razlagi ne enačimo elementa in besedilnega vozlišča, saj gre za različni vrsti vozlišč.

Razmerja vozlišč v drevesu

Vozlišča v dokumentu so med seboj hierarhično povezana. Za opis teh povezav uporabljamo pojme starš, otrok, prednik, potomec, predhodnik, naslednik in sorodnik.

<html>
   <head>
      <title>HTML DOM vozlišča</title>
   </head>

   <body>
      <h1>Glavni naslov</h1>
      <p>Odstavek besedila...</p>
      <ul>
         <li>Prva alineja</li>
         <li>Druga alineja</li>
         <li>Tretja alineja</li>
      </ul>
   </body>
</html>

Hierarhična struktura vozlišč v drevesu HTML dokumenta

V tem primeru je body otrok elementa html, elementa h1 in p pa sta sorodnika, ker imata istega starša. Element li je potomec elementa body, medtem ko je body njegov prednik.

Navigacija med vozlišči

Za krmarjenje po drevesni strukturi uporabljamo lastnosti vozlišč:

parentNode – vrne starša vozlišča
childNodes – vrne zbirko vseh podrejenih vozlišč
firstChild – vrne prvo podrejeno vozlišče
lastChild – vrne zadnje podrejeno vozlišče
nextSibling – vrne naslednje vozlišče na isti ravni
previousSibling – vrne prejšnje vozlišče na isti ravni

Primer, kjer vsebino naslova h1 preberemo in jo izpišemo v element div:

<h1 id="naslov">Glavni naslov</h1>
<div id="odstavek">Besedilo odstavka ...</div>

<script>
  let besedilo = document.getElementById("naslov").firstChild.nodeValue;
  document.getElementById("odstavek").textContent = besedilo;
</script>

Glavni naslov

Besedilo odstavka ...

Enak rezultat lahko dosežemo tudi z uporabo childNodes[0], vendar je treba vedeti, da seznam childNodes vključuje tudi besedilna vozlišča in komentarje.

<h1 id="naslov1">Glavni naslov</h1>
<div id="odstavek1">Besedilo odstavka ...</div>

<script>
  let besedilo1 = document.getElementById("naslov1").childNodes[0].nodeValue;
  document.getElementById("odstavek1").textContent = besedilo1;
</script>

Pozor: Lastnost childNodes[0] ne pomeni nujno prvega elementa, saj je lahko prvo vozlišče tudi besedilo ali komentar. Zato je treba pri uporabi razlikovati med vozlišči in elementi.

Primerjave lastnosti vozlišč

Korensko vozlišče

Objekt document predstavlja celoten dokument. Pogosto uporabljamo tudi lastnosti document.body za dostop do telesa dokumenta in document.documentElement za dostop do korenskega elementa dokumenta, ki je v dokumentu HTML navadno element <html>.

Lastnost `nodeName`

Lastnost nodeName vrne ime vozlišča. Pri elementnih vozliščih vrne ime oznake, pri besedilnem vozlišču pa vrne #text. Gre za lastnost samo za branje.

Lastnost `nodeValue`

Lastnost nodeValue vrne vrednost vozlišča. Pri besedilnem vozlišču je to njegovo besedilo, pri elementnem vozlišču pa je rezultat null. Zato te lastnosti ne uporabljamo enako pri vseh vrstah vozlišč.

Lastnost `nodeType`

Lastnost nodeType vrne številsko oznako vrste vozlišča. Pogoste vrednosti so:

Vrsta vozlišča	Vrednost
`Element`	1
`Atribut`	2
`Besedilo`	3
`Komentar`	8
`Dokument`	9

Seznam vozlišč

Nekatere metode in lastnosti vrnejo sezname vozlišč. Na primer childNodes vrne NodeList, do posameznega vozlišča pa dostopamo z indeksom, pri čemer se indeksiranje začne z 0.

let odstavki = document.getElementsByTagName("div");
let tretjiOdstavek = odstavki[2];

Dolžina seznama vozlišč

Število elementov v seznamu dobimo z lastnostjo length.

<div>To je prvi odstavek.</div>
<div>To je drugi odstavek.</div>
<div>To je tretji odstavek.</div>
<div>To je četrti odstavek.</div>
<div id="primer"></div>

<script>
  let stOdstavkov = document.getElementsByTagName("div");
  document.getElementById("primer").textContent = stOdstavkov.length;
</script>

Prikaz primera v novem oknu brskalnika.

Priporočila

Pri razlagi jasno ločuj med elementom in besedilnim vozliščem.
Pri delu z navadnim besedilom praviloma uporabljaj textContent.
Pri navigaciji po vozliščih preveri, ali res potrebuješ vsa vozlišča ali le elemente.
Lastnost nodeType uporabljaj takrat, ko moraš razlikovati med vrstami vozlišč.
Pri indeksiranju seznamov ne pozabi, da se štetje začne z 0.

Pogoste napake

Korenski element <html> se enači z objektom document, čeprav ne gre za isto vrsto vozlišča.
Predpostavi se, da childNodes vsebuje samo elemente, čeprav vključuje tudi besedilo in komentarje.
Lastnosti nodeValue se pripiše enak pomen pri vseh vrstah vozlišč, čeprav pri elementnih vozliščih vrne null.
Vrednost nodeType za besedilno vozlišče se napačno navede kot 2 namesto 3.
Lastnost length se napačno zapiše kot lenght.

Nazaj

Naprej