Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

HTML DOM navigacija

HTML DOM opisuje HTML dokument kot drevesno strukturo, pri čemer vsakemu HTML elementu, atributu ali tekstu ustreza lastno vozlišče v obliki objekta, do katerega lahko dostopamo s pomočjo jezika JavaScript:

HTML DOM vozlišča

V skladu s standardom W3C HTML DOM je v dokumentu HTML vsak element vozlišče:

  • korenski element HTML DOM drevesa je objekt Document, ki predstavlja celoten HTML dokument
  • vsak HTML element je vozlišče
  • besedila znotraj HTML elementa so besedilna vozlišča
  • vsak HTML atribut je atributno vozlišče
  • vsi komentarji so vozlišča
Drevesna struktura HTML DOM v HTML dokumentu

Drevesna struktura HTML DOM v HTML dokumentu

HTML DOM omogoča, da lahko z JavaScriptom dostopamo do vseh vozlišč v HTML drevesni strukturi. Z JavaScriptom lahko ustvarimo nova vozlišča, vsa obstoječa vozlišča pa lahko spremenimo ali izbrišemo.

Razmerja vozlišč v HTML drevesu

Vozlišča v drevesni strukturi HTML dokumenta so v medsebojni hierarhični strukturi. Za opis medsebojnih odvisnosti vozlišč uporabljamo naslednje pojme: starš, otrok, predhodnik, naslednik, sorodniki, potomec, prednik.

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

   <body>
      <h1> Glabni 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 drevesni strukturi HTML dokumenta

Hierarhična struktura vozlišč v drevesni strukturi HTML dokumenta

V zgornjem primeru:

  • je html korensko vozlišče
  • html nima staršev
  • je html starš od head in body
  • sta head in body otroka od html
  • je head prvi otrok od html
  • je body zadnji otrok od html
  • ima head enega otroka in sicer title
  • ima title enega otroka in sicer tekstovno vozlišče "HTML DOM vozlišča"
  • je p predhodnik od ul
  • je ul naslednik od p
  • so h1, p in ul sorodniki
  • je li potomec od body
  • je body prednik od li

Za krmarjenje med vozlišči z JavaScriptom uporabljamo naslednje lastnosti:

  • parentNode - prednik danega elementa
  • childNodes[številka vozlišča] - zbirka elementov, ki so vsebovani v danem elementu
  • firstChild - prvi iz zbirke elementov, ki so vsebovani v danem elementu
  • lastChild - zadnji iz zbirke elementov, ki so vsebovani v danem elementu
  • nextSibling - vrne naslednika elementa na istem nivoju
  • previousSibling - vrne pedhodnika elementa na istem nivoju

Primer, kjer vsebino vozlišča naslova h1 kopiramo v odstavek div:

<h1 id="naslov">Originalen naslov</h1> 
<div id="odstavek">Besedilo odstavka ...</div>
 
<script>
  var besedilo = document.getElementById("naslov").childNodes[0].nodeValue;
  document.getElementById("odstavek").innerHTML = besedilo; 
</script>

Glavni naslov

Besedilo odstavka ...

V zgornjem primeru smo zamenjavo vsebine izvedli z uporabo lastnosti childNodes[0] in metodo innerHTML, enak učinek pa lahko dosežemo tudi z uporabo lastnosti firstChild:

<h1 id="naslov">Originalen naslov</h1> 
<div id="odstavek">Besedilo odstavka ...</div>
 
<script>
  var besedilo = document.getElementById("naslov").firstChild.nodeValue;
  document.getElementById("odstavek").innerHTML = besedilo; 
</script>

Glavni naslov

Besedilo odstavka ...

HTML DOM korensko vozlišče

Obstajata dve posebne lastnosti, ki omogočata dostop do celotnega dokumenta:

  • document.body - dostop do telesa dokumenta
  • document.documentElement - dostop do celotnega dokumenta
<body>
<p>Primer prikazuje uporabo lastnosti <strong>document.body</strong>.</p>

<script>
   alert(document.body.innerHTML); 
</script> 
</body>

Prikaz primera uporabe lastnosti document.body v novem oknu brskalnika.

<body>
<p>Primer prikazuje uporabo lastnosti <strong>document.documentElement</strong>.</p>

<script>
   alert(document.documentElement.innerHTML); 
</script> 
</body>

Prikaz primera uporabe lastnosti document.documentElement v novem oknu brskalnika.

Lastnost nodeName

Lastnost nodeName določa ime vozlišča:

  • imena vozlišča ni mogoče spreminjati (njegova vrednost je samo za branje (angl. read-only))
  • ime vozlišča elementa je enako, kot je ime HTML oznake
  • ime vozlišča atributa je enako, kot je ime atributa
  • ime besedilnega vozlišča je vedno enako besedilu
  • ime vozlišča dokumenta je vedno document

Ime vozlišča (nodeName) vsebuje vedno velike črke imena oznake HTML elementa.

Lastnost nodeValue

Lastnost nodeValue določa vrednost vozlišča:

  • vrednost vozlišča elementa je undefined
  • vrednost besedilnega vozlišča je besedilo vozlišča
  • vrednost vozlišča atributa je vrednost atributa

Lastnost nodeType

Lastnost nodeType vrne vrsto vozlišča. Vrednosti nodeType ni mogoče spreminjati. Najpogostejše vrste vozlišč so:

Vrsta vozlišča Vrednost (nodeType)
Element 1
Atribut 2
Besedilo 2
Komentar 8
Dokument 9

Seznam HTML DOM vozlišč

Metoda getElementsByTagName() vrne seznam vozlišč, ki je kot zbirka vozlišč.

Primer, kjer izberemo vsa vozlišča odstavkov <div>:

var odstavki = document.getElementsByTagName("div");

Do vozlišča lahko dostopamo tudi z indeksom. Tako bi v zgornji zbirki odstavkov <div> do tretjega odstavka dostopili lahko tudi takole:

trtjiOdstavek = odstavki[2];

Opomba: Indeksiranje se začne z 0.

Dolžina seznama HTML DOM vozlišč

Lastnost lenght definira število vozlišč v seznamu vozlišč.

Poglejmo si primer, kjer bomo v HTML dokumentu izbrali vse odstavke <div> in izpisali njihovo število:

<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>
   var stOdstavkov = document.getElementsByTagName("div");
   document.getElementById("primer").innerHTML = stOdstavkov.length;
</script>

Prikaz primera v novem oknu brskalnika.

Nazaj
Naprej