JavaScript DOM (Document Object Model) je objektni model dokumenta, ki predstavlja HTML/SVG/XML kot drevo vozlišč
v pomnilniku. JavaScript lahko do teh vozlišč dostopa in jih spreminja. Vsebnik s HTML-om je opisan z vmesnikom
Document (za HTML razširjen v HTMLDocument). Vmesnik Element je izboljšan v
HTMLElement in različne podrazrede (npr. HTMLDivElement, HTMLInputElement …). API HTML DOM omogoča
upravljanje vsebine, slogov, atributov, dogodkov in še več. DOM predstavlja dokument kot logično drevo. Vsaka veja
se konča z vozliščem; vozlišča so objekti. Z DOM metodami lahko programsko beremo in spreminjamo strukturo, sloge
ali vsebino. Na vozlišča lahko pripnemo obdelovalce podatkov (event handler), ki se sprožijo ob klikih, tipkanju,
fokusih itd.
Z objektnim modelom DOM dobi JavaScript vso moč za ustvarjanje dinamičnih, interaktivnih strani.
DOM je W3C standard – platformsko in jezikovno nevtralen vmesnik za dinamičen dostop in posodabljanje vsebine, strukture in sloga dokumenta. Razdeljen je na:
Spodnja tabela prikazuje celovit pregled vseh ključnih DOM konceptov, metod in dogodkov. Razdeljena je po sklopih za lažje iskanje: izbiranje elementov, navigacija, spreminjanje vsebine, slogov in podroben pregled vseh pomembnih DOM dogodkov.
| Ime | Opis | Sintaksa | Primer |
|---|---|---|---|
| 1. Izbiranje elementov (Document) | |||
| getElementById() | Poišče in vrne element z določenim ID-jem (unikatno). Vrne en element ali null. | document.getElementById("id") |
const gumb = document.getElementById("gumb-potrdi"); |
| querySelector() | Vrne PRVI element, ki se ujema s podanim CSS selektorjem. Izjemno prilagodljivo. | document.querySelector("selektor") |
▶ Primer kode |
| querySelectorAll() | Vrne statični seznam vseh elementov (NodeList), ki se ujemajo s CSS selektorjem. | document.querySelectorAll("selektor") |
▶ Primer kode |
| getElementsByClassName() | Vrne živo zbirko (HTMLCollection) vseh elementov z določenim imenom razreda. | document.getElementsByClassName("razred") |
const gumbi = document.getElementsByClassName("gumb-brisi"); |
| getElementsByTagName() | Vrne živo zbirko (HTMLCollection) vseh elementov z določenim imenom oznake (tag). | document.getElementsByTagName("oznaka") |
const odstavki = document.getElementsByTagName("p"); |
| 2. Spreminjanje vsebine in atributov | |||
| textContent | Prebere ali nastavi tekstovno vsebino elementa in njegovih potomcev (ignorira HTML). | element.textContent = "tekst"; |
naslov.textContent = "W3C Standardi DOM"; |
| innerHTML | Prebere ali nastavi celotno HTML strukturo znotraj elementa (pazi na XSS varnost). | element.innerHTML = "html"; |
okno.innerHTML = "Pomembno obvestilo!"; |
| value | Prebere ali nastavi trenutno vrednost vnosnih polj (input, select, textarea). | inputElement.value = "vrednost"; |
const iskanje = document.getElementById("iskanje").value; |
| setAttribute() | Doda nov atribut ali spremeni vrednost obstoječega atributa na elementu. | element.setAttribute("ime", "vrednost") |
slika.setAttribute("src", "slike/logo.png"); |
| getAttribute() | Vrne trenutno vrednost določenega atributa na elementu (ali null, če ne obstaja). | element.getAttribute("ime") |
const povezava = link.getAttribute("href"); |
| removeAttribute() | Odstrani določen atribut z elementa. | element.removeAttribute("ime") |
vnos.removeAttribute("disabled"); |
| dataset | Omogoča dostop do vseh po meri narejenih podatkovnih atributov (data-*). | element.dataset.imeLastnosti |
const idIzdelka = gumb.dataset.productId; // data-product-id |
| 3. Spreminjanje CSS slogov in razredov | |||
| style | Omogoča neposredno dodajanje ali branje inline CSS slogov (camelCase zapisi). | element.style.lastnost = "vrednost"; |
obvestilo.style.backgroundColor = "#ff0000"; |
| classList.add() | Doda enega ali več CSS razredov elementu brez brisanja obstoječih. | element.classList.add("razred") |
gumb.classList.add("gumb-aktiven"); |
| classList.remove() | Odstrani enega ali več CSS razredov z elementa. | element.classList.remove("razred") |
gumb.classList.remove("skrit"); |
| classList.toggle() | Preklopi razred: če razred obstaja, ga odstrani; če ne obstaja, ga doda. | element.classList.toggle("razred") |
meni.classList.toggle("odprt"); |
| classList.contains() | Preveri, ali element vsebuje določen CSS razred (vrne true ali false). | element.classList.contains("razred") |
if (okno.classList.contains("prikazan")) { ... } |
| 4. Ustvarjanje in spreminjanje strukture (Drevo DOM) | |||
| createElement() | Ustvari nov HTML element v pomnilniku, ki ga je treba nato še vstaviti v DOM. | document.createElement("oznaka") |
const novaVrstica = document.createElement("tr"); |
| append() | Vstavi nabor DOM objektov ali tekstovnih vozlišč na KONEC izbranega starša. | stars.append(otrok) |
seznam.append(noviElement); |
| prepend() | Vstavi nabor DOM objektov ali tekstovnih vozlišč na ZAČETEK izbranega starša. | stars.prepend(otrok) |
tabela.prepend(glavaTabele); |
| remove() | Odstrani element neposredno iz drevesa DOM. | element.remove() |
staraVrstica.remove(); |
| 5. Navigacija med elementi in vozlišči | |||
| parentElement | Vrne neposrednega starša izbranega elementa. | element.parentElement |
const divOkvir = gumb.parentElement; |
| children | Vrne živo HTMLCollection zbirko vseh podrejenih elementov. | element.children |
const vsiOdstavki = vsebnik.children; |
| nextElementSibling | Vrne naslednjega sosednjega elementa na isti ravni. | element.nextElementSibling |
const naslednjePolje = trenutnoPolje.nextElementSibling; |
| previousElementSibling | Vrne predhodnega sosednjega elementa na isti ravni. | element.previousElementSibling |
const labela = vnos.previousElementSibling; |
| 6. Upravljanje z dogodki (Mehanika) | |||
| addEventListener() | Pripne poslušalca dogodkov (event listener) na element. | element.addEventListener("ev", funkcija) |
▶ Primer kode |
| removeEventListener() | Odstrani poslušalca dogodkov z elementa. | element.removeEventListener("ev", funkcija) |
okno.removeEventListener("resize", osveziMeni); |
| preventDefault() | Prepreči privzeto obnašanje dogodka (npr. prepreči osvežitev strani ob submitu). | event.preventDefault() |
e.preventDefault(); |
| stopPropagation() | Prepreči širjenje (mehurčenje) dogodka navzgor po DOM drevesu. | event.stopPropagation() |
e.stopPropagation(); |
| target | Vrne element, ki je dejansko sprožil dogodek (odlično za delegacijo). | event.target |
const izbran = e.target; |
| → Dogodki miške (Mouse Events) | |||
| click | Sproži se, ko uporabnik klikne (pritisne in spusti gumb) na elementu. | element.addEventListener("click", fn) |
gumb.addEventListener("click", () => { ... }); |
| dblclick | Sproži se ob dvojnem hitrem kliku na element. | element.addEventListener("dblclick", fn) |
slika.addEventListener("dblclick", povečajSliko); |
| mousedown / mouseup | mousedown ko se gumb miške pritisne; mouseup ko se gumb sprosti. |
element.addEventListener("mousedown", fn) |
okno.addEventListener("mousedown", zacniPremik); |
| mousemove | Sproži se vedno, ko se kazalec miške premika znotraj elementa. | element.addEventListener("mousemove", fn) |
platno.addEventListener("mousemove", narisiKrivuljo); |
| mouseenter / mouseleave | Sprožita se, ko miška vstopi v element ali ga zapusti (se NE mehurčita na otroke). | element.addEventListener("mouseenter", fn) |
okvir.addEventListener("mouseenter", prikaziOrodnoVrstico); |
| mouseover / mouseout | Podobno kot enter/leave, vendar se mehurčita (sprožita se tudi ob premiku na otroke). | element.addEventListener("mouseover", fn) |
meni.addEventListener("mouseover", odpriPodmeni); |
| contextmenu | Sproži se ob desnem kliku miške (preden se prikaže sistemski meni). | element.addEventListener("contextmenu", fn) |
obmocje.addEventListener("contextmenu", (e) => e.preventDefault()); |
| → Dogodki tipkovnice (Keyboard Events) | |||
| keydown | Sproži se v trenutku, ko uporabnik pritisne katerokoli tipko na tipkovnici. | element.addEventListener("keydown", fn) |
vnos.addEventListener("keydown", (e) => { if(e.key === "Enter") išči(); }); |
| keyup | Sproži se, ko uporabnik spusti pritisnjeno tipko na tipkovnici. | element.addEventListener("keyup", fn) |
iskanje.addEventListener("keyup", filtrirajRezultate); |
| keypress | (Zastarelo, uporabi keydown) Sprožilo se je ob pritisku tipke, ki odda znak. | element.addEventListener("keypress", fn) |
vnos.addEventListener("keypress", fn); |
| → Dogodki obrazcev in vnosnih polj (Form Events) | |||
| submit | Sproži se na elementu <form>, ko uporabnik odda obrazec. |
obrazec.addEventListener("submit", fn) |
form.addEventListener("submit", preveriPodatke); |
| change | Sproži se, ko se spremeni vrednost polja (za input šele ob izgubi fokusa, za select takoj). | element.addEventListener("change", fn) |
izbira.addEventListener("change", posodobiCeno); |
| input | Sproži se TAKOJ ob vsakem vnesenem znaku v polje (odlično za sprotno preverjanje). | element.addEventListener("input", fn) |
geslo.addEventListener("input", preveriJakostGesla); |
| focus / blur | focus ko polje pridobi fokus (klik nanj); blur ko polje izgubi fokus. |
element.addEventListener("focus", fn) |
vnos.addEventListener("focus", oznaciZeleno); |
| invalid | Sproži se, ko element ob oddaji obrazca ne ustreza HTML5 validacijskim pravilom. | element.addEventListener("invalid", fn) |
emailField.addEventListener("invalid", prikaziNapako); |
| → Dogodki okna in dokumenta (Window / Document) | |||
| DOMContentLoaded | Sproži se na document, ko je celoten HTML naložen in parsiran
(ne čaka slik/stilov). |
document.addEventListener("DOMContentLoaded", fn) |
document.addEventListener("DOMContentLoaded", iniciacijaVadnice); |
| load | Sproži se na window, ko je celotna stran POPOLNOMA naložena (vključno s slikami in CSS). |
window.addEventListener("load", fn) |
window.addEventListener("load", zaustaviLoadingSpinner); |
| resize | Sproži se na window ob vsakem spreminjanju velikosti brskalnikovega okna. |
window.addEventListener("resize", fn) |
window.addEventListener("resize", prilagodiZaslon); |
| scroll | Sproži se ob pomikanju (skrolanju) strani ali določenega vsebnika navzgor/navzdol/vstran. | element.addEventListener("scroll", fn) |
window.addEventListener("scroll", posodobiGumbNaVrh); |
| 7. Delo z zbirkami (Zbirke in seznami) | |||
| forEach() | Metoda, ki jo ima NodeList in omogoča enostaven prehod skozi vse najdene elemente. | nodelist.forEach(item => { ... }) |
gumbi.forEach(g => g.classList.add("stil")); |
| Array.from() | Pretvori psevdo-polje (HTMLCollection/NodeList) v pravo polje za uporabo map/filter metod. | Array.from(zbirka) |
const polje = Array.from(document.children); |
| length | Vrne število elementov/vozlišč v zbirki. | zbirka.length |
console.log(vrstice.length); |
V realnem spletnem razvoju se boste neprestano srečevali s tremi specifičnimi izzivi. Spodaj so pripravljeni napredni primeri, ki rešujejo te težave z uporabo optimalnih DOM metod:
| Scenarij / Težava | Rešitev z DOM dogodki | Akcija |
|---|---|---|
| 1. Osveževanje strani ob oddaji obrazca Brskalnik ob kliku na gumb pošlji vedno osveži celotno stran, kar prekine uporabniško izkušnjo. |
Uporaba e.preventDefault() na dogodku submit, kar omogoča preverjanje
podatkov in pošiljanje v ozadju (AJAX). |
▶ Primer kode |
| 2. Dinamično dodani elementi ne reagirajo Če z JavaScriptom naknadno dodate vrstice ali gumbe, klasični poslušalci dogodkov nanje ne primejo. |
Delegacija dogodkov (Event Delegation). Poslušalca nastavimo na skupnega starša,
klik pa ulovimo preko e.target. |
▶ Primer kode |
| 3. Sprotno (živo) preverjanje vnosnih polj Dogodek change
čaka na izgubo fokusa, uporabniki pa želijo povratno informacijo takoj. |
Uporaba dogodka input, ki se sproži ob vsaki natiskani črki (npr. sprotno preverjanje
moči gesla). |
▶ Primer kode |
