Načrtovanje in razvoj spletnih aplikacij

HTML DOM

V objektnem modelu HTML DOM objekt document predstavlja spletno stran. document je lastnik vseh ostalih objektov na spletni strani. Ko želimo dostopati do objektov na spletni strani, vedno dostop začenemo preko objekta document. Pri tem lahko:

Iskanje HTML elementa

Da bi z JavaScriptom lahko manipulirali HTML element na spletni strani, ga moramo najprej poiskati. To lahko storimo na več načinov:

Metoda Opis
document.getElementById() najde element po id
document.getElementsByTagName() najde element po imenu oznake
document.getElementsByClassName() najde element po imenu razreda
document.querySelectorAll() najde vse elemente s selektorjem

Iskanje HTML elementa z id

Najlažje HTML element poiščemo v DOM z atributom id.

var mojElement = document.getElementById("primer");

V primeru iščemo element z atributom id="primer". Če je element najden, metoda vrne element kot objekt v spremenljivko mojElement. Če element ni najden, bo vrednost spremenljivke mojElement null.

Iskanje HTML elementa z imenom HTML oznake

Primer, kjer bomo poiskali vse odstavke <div>:

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

Primer, kjer poiščemo vse elemente z atributom id="primer" in nato vse odstavke <div>, ki so znotraj id="primer":

var odstavki = document.getElementById("primer");
var divOdstavki = odstavki.getElementsByTagName("div");

Iskanje HTML elementa z imenom CSS razreda

Če želimo piskati vse elemente HTML, ki imajo enako ime CSS razreda uporabimo getElementsByClassName().

Primer, kjer iskanje vrne seznam vseh elementov, ki imajo CSS razred class="primer":

var razred = document.getElementsByClassName("razred");

Iskanje HTML elementa s CSS selektorjem

Če želimo poiskati vse HTML elemente, ki ustrezajo določenemu CSS selektorju, uporabimo metodo querySelectorAll().

Primer, ki vrne seznam vseh elementov <div>, ki vsebujejo razred class="primer":

var selektor = document.querySelectorAll("div.primer");

Iskanje HTML elementov z zbirko HTML objektov

Lastnost Opis DOM
document.anchors vrne vse <a> elemente, ki imajo ime atributa 1
document.applets vrne vse <applet> elemente
(opuščena v HTML5)
1
document.baseURI vrne absolutno osnovni URI dokumenta 3
document.body vrne <body> element 1
document.cookie vrne piškotek tega dokumenta 1
document.doctype vrne tip dokumenta 3
document.documentElement vrne <html> element 3
document.documentMode vrne način, ki ga brskalnik uporablja 3
document.documentURI vrne URI dokumenta 3
document.domain vrne ime domene serverja, na katerem je dokument 1
document.domConfig vrne konfiguracijo DOM (zastarelo) 3
document.embeds vrne vse <embed> elemente 3
document.forms vrne vse <form> elemente 1
document.head vrne vse <head> elemente 3
document.images vrne vse <img> elemente 1
document.implementation vrne implementacijo DOM 3
document.inputEncoding vrne kodiranje dokumenta (nabor znakov) 3
document.lastModified vrne čas in datum zadnje posodobitve dokumenta 3
document.links Vrne vse <area> in <a> elemente, ki imajo atribut href 1
document.readyState vrne status (nalaganje) dokumenta 3
document.referrer vrne URI napotitelja (povezan dokument) 1
document.scripts vrne vse <scripts> elemente 3
document.strictErrorChecking vrne, če je uporabljeno preverjanje napak 3
document.title vrne <title> element 1
document.URL vrne celoten URL dokumenta 1

Spreminjanje HTML elementa

Z JavaScriptom in HTML DOM lahko spreminjamo vsebino HTML elementov:

Metoda Opis
element.innerHTML = spremeni vsebino HTML elementa
element.attribute = spremeni atribut HTML elementa
element.setAttribute(atribut,vrednost) spremeni atribut HTML elementa
element.style.lastnost = spremeni slog HTML elementa

Spreminjanje HTML izpisa

JavaScript lahko kreira dinamično vsebino. Za izpis v HTML uporabljamo document.write(), ki pa ga nikoli ne smemo uporabiti, ko je stran že naložena, saj povozi vsebino spletne strani.

Primer izpisa datuma:

document.write(Date());

Spreminjanje vsebine HTML elementa

Vsebino HTML elementa najlažje spremenimo z uporabo lastnosti innerHTML. Sintaktično spremembo vsebine HTML elementa zapišemo:

document.getElementById(id).innerHTML = nov HTML;

Primer spremembe vsebine odstavka:

<p id="odstavek">Besedilo odstavka.</p>
<script>
   document.getElementById("odstavek").innerHTML = "Novo besedilo odstavka.";
</script>

Besedilo odstavka.

Primer spremembe vsebine naslova:

<h1 id="naslov">Originalen naslov.</h1>
<script>
   var element = document.getElementById("naslov");
   element.innerHTML = "Spremenjen naslov";
</script>

Originalen naslov.

Spreminjanje vrednosti atributa HTML elementa

Spremembo atributa HTML elementa sintaktično zapišemo:

document.getElementById(id).attribute = nova vrednost;

Primer spremembe atributa oznake <img> (zamenjava slike):

<img id="slika" src="sonce.gif">
<script>
   document.getElementById("slika").src = "oblaki.jpg"; 
</script>

Spreminjanje CSS sloga HTML elementa

HTML DOM JavaScriptu omogoča spreminjanje sloga HTML elementa. Spremembo sloga sintaktično zapišemo:

document.getElementById(id).style.lastnost = nov slog;

Primer spremembe barve naslova:

<h1 id="naslov">Glavni naslov!</h1> 
<script>
   document.getElementById("naslov").style.color = "red"; 
</script>

Glavni naslov!

Dodajanje in brisanje HTML elementa

Metoda Opis
document.createElement() kreira HTML element
document.removeChild() odstrani HTML element
document.appendChild() doda HTML element
document.replaceChild() zamenja HTML element
document.write(text) zapiše v HTML

Dodajanje dogodka HTML elementa

Metoda Opis
document.getElementById(id).onclick=function()
{ koda }
doda kodo dogodka onclick