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() |
doda kodo dogodka onclick |