JavaScript DOM Elementi

JavaScript HTML DOM Elementi vadnica vas bo naučila, kako poiskati in dostopati do HTML elementov na spletni strani. Manipulacija DOM‑a se začne z iskanjem elementov – brez pravega referenčnega objekta ne moremo spreminjati vsebine, slogov ali atributov. Elemente lahko najdemo na več načinov.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM – iskanje elementov</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 16px;
        }
        button {
            margin: 6px 0;
            padding: 6px 12px;
            font-size: 14px;
        }
        .box {
            border: 1px solid #ddd;
            padding: 8px;
            margin-top: 12px;
        }
        pre {
            padding: 8px;
            border: 1px solid #ccc;
            white-space: pre-wrap;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <h1>JavaScript DOM – iskanje elementov</h1>

    <!-- 1. PO ID -->
    <div id="ex1" class="box">
        <p id="para1">To je odstavek z ID‑jem <code>para1</code>.</p>
        <button id="btnFindId">Najdi element po ID‑ju</button>
        <pre id="outputId"></pre>
    </div>

    <!-- 2. PO RAZREDU -->
    <div id="ex2" class="box">
        <ul class="seznam">
            <li>Prvi element</li>
            <li>Drugi element</li>
            <li>Tretji element</li>
        </ul>
        <button id="btnFindClass">Najdi elemente po razredu <code>.seznam</code></button>
        <pre id="outputClass"></pre>
    </div>

    <!-- 3. PO OZNAKI (TAG) -->
    <div id="ex3" class="box">
        <h2>Naslov H2</h2>
        <h2>Še en naslov H2</h2>
        <button id="btnFindTag">Najdi vse <code>h2</code> elemente</button>
        <pre id="outputTag"></pre>
    </div>

    <!-- 4. PO CSS‑SELEKTORJU -->
    <div id="ex4" class="box">
        <p class="highlight">Prvi poudarjen odstavek.</p>
        <p>Navaden odstavek.</p>
        <p class="highlight">Drugi poudarjen odstavek.</p>
        <button id="btnFindSelector">Najdi <code>.highlight</code> s <code>querySelectorAll</code></button>
        <pre id="outputSelector"></pre>
    </div>

    <!-- 5. PO OBRAZCU (HTMLCollection) -->
    <div id="ex5" class="box">
        <form id="testForm">
            <label>Ime: <input type="text" name="ime" value="Borut"></label><br>
            <label>E‑mail: <input type="email" name="mail" value="demo@primer.si"></label><br>
            <label>Starost: <input type="number" name="starost" value="52"></label>
        </form>
        <button id="btnFindForm">Prikaži vrednosti vseh polj v obrazcu</button>
        <pre id="outputForm"></pre>
    </div>

    <script>
        // 1. PO ID
        document.getElementById("btnFindId").onclick = function () {
            const el = document.getElementById("para1");
            const out = document.getElementById("outputId");
            out.textContent = "Po ID‑ju: " + el.tagName + " – " + el.textContent;
        };

        // 2. PO RAZREDU
        document.getElementById("btnFindClass").onclick = function () {
            const elems = document.getElementsByClassName("seznam")[0].children;
            let txt = "Po razredu .seznam – najdeni <li> elementi:\n";
            for (let i = 0; i < elems.length; i++) {
                txt += `  #${i+1}: ${elems[i].textContent}\n`;
            }
            document.getElementById("outputClass").textContent = txt;
        };

        // 3. PO OZNAKI
        document.getElementById("btnFindTag").onclick = function () {
            const headings = document.getElementsByTagName("h2");
            let txt = `Po oznaki <h2> – najdeni naslovi (${headings.length}):\n`;
            for (let i = 0; i < headings.length; i++) {
                txt += `  #${i+1}: ${headings[i].textContent}\n`;
            }
            document.getElementById("outputTag").textContent = txt;
        };

        // 4. PO CSS‑SELEKTORJU
        document.getElementById("btnFindSelector").onclick = function () {
            const highlighted = document.querySelectorAll(".highlight");
            let txt = `Po selektorju ".highlight" – najdeni elementi (${highlighted.length}):\n`;
            highlighted.forEach((el, idx) => {
                txt += `  #${idx+1}: ${el.textContent}\n`;
            });
            document.getElementById("outputSelector").textContent = txt;
        };

        // 5. PO OBRAZCU
        document.getElementById("btnFindForm").onclick = function () {
            const formElems = document.forms["testForm"].elements; // HTMLCollection
            let txt = "Vrednosti vseh polj v obrazcu:\n";
            for (let i = 0; i < formElems.length; i++) {
                const el = formElems[i];
                txt += `  ${el.name}: ${el.value}\n`;
            }
            document.getElementById("outputForm").textContent = txt;
        };
    </script>
</body>
</html>

REZULTAT

Elemente lahko najdemo na več načinov. Spodaj je pregled najpogosteje uporabljenih metod:

Iskanje HTML elementa po ID‑ju	Najlažji način za iskanje HTML elementa v DOM je uporaba ID‑ja elementa.	Glej primer
Iskanje HTML elementov po imenu oznake	Če želimo najti vse HTML elemente z isto oznako.	Glej primer
Iskanje HTML elementov po imenu razreda	Če želimo najti vse HTML elemente z istim imenom razreda.	Glej primer
Iskanje HTML elementov s CSS izbirniki	Če želimo najti vse HTML elemente, ki se ujemajo z določenim CSS izbirnikom.	Glej primer
Iskanje HTML elementov po zbirkah HTML‑predmetov	V tem primeru najdemo element z id="f" v zbirki obrazcev in prikažemo vse njegove vrednosti.	Glej primer