Objekt document predstavlja dokument HTML in je vstopna točka za delo z HTML DOM. Z njim lahko elemente poiščemo, pregledamo njihove lastnosti, spremenimo vsebino, atribute in sloge, ustvarjamo in odstranjujemo elemente ter jim dodamo dogodke. Sodobna praksa pri delu z DOM temelji na jasni ločitvi med iskanjem elementa, spreminjanjem njegove vsebine, upravljanjem drevesne strukture in povezovanjem dogodkov.

Osnovna pravila

• Preden element spremenimo, ga moramo najprej poiskati.
• Za element z enoličnim id pogosto uporabimo document.getElementById().
• Za iskanje po selektorjih CSS uporabimo querySelector() ali querySelectorAll().
• Pri navadnem besedilu praviloma uporabljamo textContent, ne pa innerHTML.
• Za dodajanje dogodkov je v sodobni kodi priporočljiva metoda addEventListener().

Iskanje elementov

Iskanje elementa z id

Metoda document.getElementById() poišče element glede na njegov id. Če tak element ne obstaja, vrne null.

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

Ta pristop je zelo uporaben takrat, ko ima element v dokumentu enoličen id.

Iskanje elementov po imenu oznake

Metoda getElementsByTagName() poišče vse elemente z določenim imenom oznake, na primer vse odstavke <p> ali vse elemente <div>.

let odstavki = document.getElementsByTagName("p");

Iskanje lahko omejimo tudi na že izbran element:

let okvir = document.getElementById("primer");
let divElementi = okvir.getElementsByTagName("div");

Iskanje elementov po razredu

Če želimo poiskati vse elemente, ki imajo določen razred CSS, uporabimo metodo getElementsByClassName().

let razredi = document.getElementsByClassName("opomba");

Iskanje elementov s selektorjem CSS

Metoda querySelector() vrne prvi element, ki ustreza selektorju, metoda querySelectorAll() pa vrne vse ustrezne elemente.

let prviElement = document.querySelector("div.primer");
let vsiElementi = document.querySelectorAll("div.primer");

Pogoste lastnosti objekta document

Pri delu z DOM pogosto uporabljamo lastnosti, kot so document.body, document.head, document.title, document.forms, document.images in document.links. Nekatere starejše lastnosti in zbirke iz prejšnjih gradiv so danes zastarele ali niso več priporočljive za razlago kot osrednje rešitve.

Spreminjanje elementov

Elementom lahko spreminjamo vsebino, atribute in slog. Pri navadnem besedilu je praviloma primernejša lastnost textContent, saj jasno pomeni, da vstavljamo besedilo in ne kode HTML.

Spreminjanje izpisa

V sodobni kodi za izpis na spletno stran praviloma ne uporabljamo metode document.write(), saj lahko po nalaganju dokumenta prepiše obstoječo vsebino strani. Primernejši je izpis v že obstoječi element.

<p id="izpis"></p>
<script>
  document.getElementById("izpis").textContent = new Date().toString();
</script>

Spreminjanje vsebine elementa

Vsebino elementa lahko spremenimo z lastnostjo textContent ali innerHTML. Za navadno besedilo je običajno boljša izbira textContent.

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

Primer spremembe vsebine naslova:

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

Spreminjanje vrednosti atributa

Atribut lahko spremenimo neposredno prek lastnosti ali z metodo setAttribute(). Obe možnosti sta uporabni, metoda setAttribute() pa je posebej pregledna, kadar delamo z imenom atributa in njegovo vrednostjo.

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

Spreminjanje sloga elementa

Slog elementa lahko spreminjamo prek lastnosti style.

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

Dodajanje in odstranjevanje elementov

Nove elemente ustvarimo z metodo createElement(), nato pa jih vstavimo v dokument, na primer z metodo appendChild(). Element lahko tudi zamenjamo z metodo replaceChild(). V sodobni kodi metoda document.write() ni priporočljiva za dinamično spreminjanje že naložene strani.

Ustvarjanje elementa

Nov element ustvarimo z metodo createElement().

let novOdstavek = document.createElement("p");

Dodajanje elementa

Ko element ustvarimo, ga lahko dodamo v nadrejeni element z metodo appendChild().

let seznam = document.getElementById("seznam");
let novElement = document.createElement("li");
novElement.textContent = "Nov element";
seznam.appendChild(novElement);

Odstranjevanje elementa

Element odstranimo prek nadrejenega elementa z metodo removeChild().

let seznam = document.getElementById("seznam");
let elementZaBrisanje = document.getElementById("izbrisi");
seznam.removeChild(elementZaBrisanje);

Zamenjava elementa

Obstoječe vozlišče lahko zamenjamo z novim z metodo replaceChild().

let seznam = document.getElementById("seznam");
let novElement = document.createElement("li");
novElement.textContent = "Nadomestni element";
let stariElement = document.getElementById("stari");
seznam.replaceChild(novElement, stariElement);

Dodajanje dogodkov

Dogodke lahko elementom dodamo na več načinov, vendar je v sodobni kodi priporočljivo uporabljati metodo addEventListener(). Ta pristop je preglednejši in omogoča dodajanje več poslušalcev istemu elementu.

<button id="gumb" type="button">Klikni</button>
<script>
  document.getElementById("gumb").addEventListener("click", function () {
    console.log("Klik na gumb.");
  });
</script>

addEventListener()

Ta metoda poveže dogodek z elementom brez neposrednega prepisovanja lastnosti dogodka.

document.getElementById("gumb").addEventListener("click", function () {
   console.log("Klik na gumb.");
});

onclick

Lastnost onclick je še vedno veljavna, vendar manj prilagodljiva, ker isti lastnosti ne moremo na enak način dodajati več neodvisnih poslušalcev.

document.getElementById("gumb").onclick = function () {
   console.log("Klik na gumb.");
};

Priporočila

• Za enolične elemente uporabljaj getElementById().
• Za zahtevnejše izbire uporabljaj querySelector() in querySelectorAll().
• Pri navadnem besedilu praviloma uporabljaj textContent.
• Atribute nastavljaj pregledno, po potrebi z metodo setAttribute().
• Dogodke v sodobni kodi poveži z addEventListener().

Pogoste napake

• Za navadno besedilo se uporabi innerHTML, čeprav je primernejša lastnost textContent.
• Predpostavi se, da metoda querySelectorAll() vrne seznam, ki se samodejno posodablja, čeprav gre za statični seznam.
• Dogodki se povezujejo izključno z lastnostmi, kot je onclick, čeprav je metoda addEventListener() praviloma preglednejša in primernejša.
• Pri odstranjevanju ali zamenjavi vozlišč se ne upošteva, da to izvajamo prek nadrejenega elementa.
• Element se poskuša spremeniti, še preden je bil pravilno poiskan ali preden je na voljo v dokumentu.