JavaScript DOM HTML Zbirke (HTMLCollection)

Vmesnik HTMLCollection predstavlja urejeno zbirko HTML elementov. Te zbirke so "žive" (ang. Live), kar pomeni, da se samodejno posodobijo takoj, ko se spremeni struktura HTML dokumenta. Najpogosteje jih dobimo kot rezultat metod, ki iščejo več elementov hkrati.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript HTMLCollection primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .postavka {
            padding: 12px;
            margin: 8px 0;
            border-radius: 6px;
            font-weight: bold;
            font-family: sans-serif;
        }
        #prikaz-rezultata {
            margin-top: 25px;
            padding: 20px;
            border-radius: 8px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="postavka">Element 1 (Indeks 0)</div>
    <div class="postavka">Element 2 (Indeks 1)</div>
    <div class="postavka">Element 3 (Indeks 2)</div>
    
    <div id="prikaz-rezultata">
        Kliknite gumb "ZAŽENI", da JavaScript nastavi sloge in analizira zbirko!
    </div>
    
    <script>
        // 1. Pridobimo zbirko vseh elementov z razredom "postavka"
        const zbirka = document.getElementsByClassName("postavka");
    
        /* 2. JavaScriptu ukažemo, naj nastavi barve. Uporabimo metodo setProperty(), 
        ker nam (za razliko od direktnega dostopa .style.color) omogoča dodajanje parametra 
        "important". To je nujno, da naši slogi v tem primeru povozijo morebitne barvne 
        konflikte iz glavne CSS/SASS datoteke. */
        // Prvi element
        zbirka[0].style.setProperty("background-color", "#e3f2fd", "important");
        zbirka[0].style.setProperty("color", "#0d47a1", "important");
        
        // Drugi element
        zbirka[1].style.setProperty("background-color", "#f1f8e9", "important");
        zbirka[1].style.setProperty("color", "#33691e", "important");
        
        // Tretji element
        zbirka[2].style.setProperty("background-color", "#fff3e0", "important");
        zbirka[2].style.setProperty("color", "#e65100", "important");
    
        // Stil za terminalni izpis
        const terminal = document.getElementById("prikaz-rezultata");
        terminal.style.setProperty("background-color", "#333333", "important");
        terminal.style.setProperty("color", "#c2ff02", "important");
    
        // 3. Analiza zbirke za izpis
        let analiza = ">> SISTEMSKA ANALIZA...<br>";
        analiza += "Najdenih elementov: " + zbirka.length + "<br>";
        analiza += "Vsebina na indeksu 1: " + zbirka[1].innerText + "<br>";
        analiza += ">> STATUS: Uspešno osveženo.";
    
        terminal.innerHTML = analiza;
    </script>
</body>
</html>

REZULTAT

item()	Vrne element z določenim indeksom.	Glej primer
length	Vrne število elementov v HTMLCollection.	Glej primer
namedItem()	Vrne element s podanim ID-jem.	Glej primer