JavaScript DOM – manipulacija dokumenta

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.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM – osnovni primeri</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        * { 
            box-sizing: border-box; 
        }
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            padding: 16px;
            line-height: 1.5;
        }
        .primer {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 12px 14px;
            margin-bottom: 16px;
        }
        .primer h2 { 
            margin: 0 0 8px; 
            font-size: 1.05rem; 
        }
        .okvir {
            padding: 10px;
            border: 1px solid #9ca3af;
            border-radius: 6px;
        }
        
        #p2 {
            display: inline-block;
            cursor: pointer;
            border: 1px solid #9ca3af;
            border-radius: 6px;
            padding: 8px 10px;
        }
        #p2.poudarjen {
            color: #1e40af;
            border-color: #fe5849;
            transform: translateY(-1px);
        }
        
        .stolp {
            position: relative;
            width: 60px;
            height: 320px;
            border: 1px dashed #9ca3af;
            border-radius: 6px;
            background: repeating-linear-gradient(
                to bottom,
                #f8fafc, #f8fafc 16px,
                #eef2f7 16px, #eef2f7 32px
            );
        }
        .krog {
            position: absolute;
            left: 5px;
            top: 5px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #fde047;
            border: 1px solid #0f172a;
            cursor: pointer;
            transition: box-shadow .15s ease;
        }
        .krog:active { 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20); 
        }
        @media (prefers-reduced-motion: reduce) {
            .krog { transition: none; }
        }
        /* Dostopnost (samo vizualni fokus) */
        :focus-visible { 
            outline: 2px solid #60a5fa; 
            outline-offset: 2px; 
        }
    </style>
</head>
<body>
    <div class="primer" id="primer1">
        <h2>Primer 1 – innerHTML in validacija vnosa</h2>
        <div class="okvir">
            <p id="uvod"></p>
            
            <label for="stevilo">Vnesi številko (1–10):</label>
            <input id="stevilo" type="text" inputmode="numeric" 
                pattern="[0-9]*" aria-describedby="navodilo">
            <button id="potrdi" type="button">Preveri</button>
            <div id="navodilo" style="font-size:.9rem; margin-top:6px;">
                Primer preveri, ali je vnos med 1 in 10.
            </div>
        
            <p id="rezultat" class="okvir" style="margin-top:10px; color: #4CAF50;"></p>
        </div>
    </div>
    
    <div class="primer" id="primer2">
        <h2>Primer 2 – sprememba sloga z razredom</h2>
        <p>Klikni element za vklop/izklop poudarka.</p>
        <p id="p2">Sprememba sloga</p>
    </div>
    
    <div class="primer" id="primer3">
        <h2>Primer 3 – animacija z requestAnimationFrame</h2>
        <p>Klikni rumeni krog – zapelje se navzdol in nazaj navzgor.</p>
        <div class="stolp" aria-label="Animacijsko območje">
            <div id="krog" class="krog" role="button" tabindex="0" aria-label="Zaženi animacijo"></div>
        </div>
    </div>

    <script>
        // Primer 1
        const uvod = document.getElementById('uvod');
        const vnos = document.getElementById('stevilo');
        const potrdi = document.getElementById('potrdi');
        const rezultat = document.getElementById('rezultat');
        
        uvod.innerHTML = 'Dobrodošli v mojo JavaScript vadnico!';
        
        potrdi.addEventListener('click', () => {
            const raw = vnos.value.trim();
            const num = Number(raw);
            if (!Number.isInteger(num) || num < 1 || num > 10) {
                rezultat.innerHTML = 'Vnos ni pravilen, vpiši številko od 1 do 10.';
                rezultat.style.color = '#b91c1c';
            } else {
                rezultat.innerHTML = 'Vpisana vrednost je pravilna.<br>Vpisal si številko ' + num;
                rezultat.style.color = '#065f46';
            }
        });
        
        // Primer 2
        const p2 = document.getElementById('p2');
        p2.addEventListener('click', () => {
            p2.classList.toggle('poudarjen');
        });
        
        // Primer 3
        const krog = document.getElementById('krog');
        const stolp = krog.parentElement;
        
        function animateCircle() {
            const h = stolp.clientHeight;
            const r = krog.clientHeight; // velikost kroga (48px)
            const maxY = h - r - 5; // spodnja meja (malo odmika)
            const trajanje = 900; // ms za pot dol ali gor
            const zacetek = performance.now();
        
            function easeInOut(t) {
                // standardni ease-in-out
                return t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2) / 2;
            }
            
            function frame(now) {
                const dt = now - zacetek;
                const t = Math.min(dt / trajanje, 1);
                const y = Math.round(easeInOut(t) * maxY);
                krog.style.transform = 'translateY(' + y + 'px)';
                
                if (t < 1) {
                    requestAnimationFrame(frame);
                } else {
                    // circle gre nazaj gor
                    const zacetekNazaj = performance.now();
                    function frameUp(now2) {
                        const dt2 = now2 - zacetekNazaj;
                        const t2 = Math.min(dt2 / trajanje, 1);
                        const y2 = Math.round((1 - easeInOut(t2)) * maxY);
                        krog.style.transform = 'translateY(' + y2 + 'px)';
                        if (t2 < 1) requestAnimationFrame(frameUp);
                    }
                    requestAnimationFrame(frameUp);
                }
            }
        
            requestAnimationFrame(frame);
        }
        
        krog.addEventListener('click', animateCircle);
        krog.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                animateCircle();
            }
        });
    </script>
</body>
</html>

REZULTAT

Z objektnim modelom DOM dobi JavaScript vso moč za ustvarjanje dinamičnih, interaktivnih strani.

JavaScript lahko spremeni vse HTML elemente na spletni strani.
JavaScript lahko spremeni vse HTML atribute na spletni strani.
JavaScript lahko spremeni CSS sloge (prek style ali classList).
JavaScript lahko odstrani obstoječe elemente in atribute.
JavaScript lahko doda nove elemente in atribute.
JavaScript se lahko odzove na vse HTML dogodke.
JavaScript lahko definira in sproži tudi lastne dogodke.

DOM je W3C standard – platformsko in jezikovno nevtralen vmesnik za dinamičen dostop in posodabljanje vsebine, strukture in sloga dokumenta. Razdeljen je na:

Core DOM – standardni model za vse vrste dokumentov.
XML DOM – standardni model za XML dokumente.
HTML DOM – standardni model za HTML dokumente.

Metode DOM so dejanja, ki jih lahko izvajamo na elementih (ustvari, najdi, odstrani, spremeni …). Lastnosti so vrednosti, ki jih preberemo ali nastavimo. V DOM so elementi objekti z lastnostmi in metodami.

Interaktivni primer

Spodaj je interaktivni primer, ki pokaže ključne DOM operacije: branje vrednosti iz vnosnega polja, ustvarjanje elementov (createElement), vstavljanje v dokument (append/prepend), brisanje (remove), spreminjanje besedila in atributov (textContent, setAttribute), delo z razredi (classList), data-* atributi (dataset) ter t. i. “event delegation” na staršu, da ujamemo klike na dinamično dodanih elementih. Primer je zasnovan tako, da lahko probate: dodaš elemente, jih označiš kot opravljene, jim spremeniš barvo, jih brišeš in spremljaš števec v realnem času.

Interaktivni DOM primer: Dinamični seznam

0 elementov Namig: dvojni klik za ureditev; klik na besedilo preklopi “opravljeno”; koš odstrani; povleci ročaj ≡ za razvrstitev.

Uporabljamo: querySelector, createElement, classList, dataset, append, remove, event delegation, drag & drop, localStorage.

Najpogostejši način za dostop do elementa je uporaba ID-ja. V zgornjem primeru metoda getElementById() poišče element z id="uvod". Najlažji način za nastavitev vsebine je lastnost innerHTML. Za spreminjanje slogov je priporočeno uporabljati classList (dodajanje/odstranjevanje razredov), saj je preglednejše kot nizanje lastnosti style.

Področja DOM

HTML DOM Dogodki	Pregled najpogostejših dogodkov in dela z njimi: addEventListener, fazi zajemanja in mehurjenja (capturing/bubbling), preventDefault, stopPropagation, ter primeri klikov, tipkanja, fokusa in nalaganja.	Glej primer
HTML DOM Dokumenti	Objekt Document: ključne lastnosti (documentElement, head, body, title, URL, readyState) in metode (getElementById, querySelector, createElement, createTextNode, createDocumentFragment), življenjski cikel DOMContentLoaded vs. load.	Glej primer
HTML DOM Elementi	Element/HTMLElement: id, className, attributes, dataset, branje/pisanje vsebine (textContent, innerHTML), upravljanje razredov (classList) in slogov (style), merjenje (getBoundingClientRect), iskanje (children, closest, matches).	Glej primer
HTML DOM Zbirke	Razumevanje zbirk elementov, ki jih vrne brskalnik: HTMLCollection (žive zbirke) in NodeList (statične zbirke), dostopanje prek indeksov ter uporaba lastnosti length.	Glej primer
HTML DOM Spreminjanje	Ustvarjanje, vstavljanje in odstranjevanje vozlišč: append, prepend, before, after, replaceWith, appendChild, insertBefore, remove; predloge s <template>, DocumentFragment, setAttribute/getAttribute in varnostne opombe pri innerHTML.	Glej primer