document.getElementById(id)

Metoda getElementById() vrne element s podano vrednostjo in vrne ničelno vrednost, če element ne obstaja. Je ena najpogostejših metod v HTML DOM, ker se uporablja skoraj vsakič, ko želimo prebrati ali urediti dokument.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>getElementById()</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            display: inline-block;
            width: auto;
            padding: 10px;
            background-color: orange;
            color: #333;
            border: 1px solid red;
            border-radius: 12px;
            cursor: pointer;
        }
        #demo {
            display: none;
        }
        input[type=text] {
            font-size: 24px;
            padding: 6px;
            border: none;
            outline: none;
        }
        label {
            display: block;
            font-size: 18px;
        }
        .btn {
            padding: 10px;
            background-color: greenyellow;
            color: #333;
            border: 1px solid green;
            border-radius: 4px;
        }
        .bn {
            padding: 10px;
            background-color: yellow;
            color: #333;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 8px;
        }
        .bn:active {
            background-color: blue;
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>Metoda getElementById() vrne element s podano vrednostjo</h1>
    <div onclick="prikaz()">
        <p>Dobrodošli v <span id="demo">JavaScript</span> vadnico!</p>
    </div>
    <hr>
    
    <h4>Metoda getElementById() se lahko uporabi tudi za iskalnik, kjer iščemo HTML elemente s 
        CSS izbirnikom.</h4>
    <form id="input">
        <label for="prvi">Prvo število:</label>
        <input id="prvi" type="text" value="13" class="in"><br><br>
        <label for="drugi">Drugo število:</label>
        <input id="drugi" type="text" value="27" class="in">
    </form><br>
    
    <button onclick="Selector()" class="btn">Poišči številke</button>
    <p id="iskalnik"></p>
    <hr>
    
    <h4>Metoda getElementById() vrne element s podano vrednostjo in vrne ničelno vrednost, 
        če element ne obstaja.</h4>
    <button class="bn" onclick='getElement()'>PRITISNI NA GUMB</button>
    
    <p id='getElem2'><b>PRVI ID</b></p>
    <p id='getElem3'>DRUGI ID</p>
    
    <b id='getElem1'></b>
    <hr>
    
    <img id="img" src="/demo/smiley-face.png" alt="smeško" style="width: 5%; height: auto">
    <hr>
    
    <script>
        // sprememba elementa z funkcijo onclick
        function prikaz() {
            document.getElementById("demo").style.display = "inline-block";
            document.getElementById("demo").style.setProperty("color", "red", "important");
            document.querySelector("div").style.setProperty("background", "lightblue", "important");
            document.querySelector("div").style.boxShadow = "0px 0px 0px 2px rgba(6, 24, 44, 0.4), " +
                "0px 4px 6px -1px rgba(6, 24, 44, 0.65), 0px 1px 0px inset rgba(255, 255, 255, 0.08)";
        }
        // iskanje html elementov
        function Selector() {
            const a = document.forms["input"];
            let txt = "";
            let b;
            for (b = 0; b < a.length ;b++) {
                txt += a.elements[b].value + "<br>"
            }
            document.getElementById("iskalnik").innerHTML = txt;
            document.getElementById("iskalnik").style.border = "1px solid green"
            document.getElementById("iskalnik").style.borderRadius = "6px"
            document.getElementById("iskalnik").style.padding = "15px"
            document.getElementById("iskalnik").style.fontSize = "30px";
            document.getElementById("iskalnik").style.fontFamily = "Consolas, sans-serif";
        }
        // vrne element s podano vrednostjo
        function getElement() {
            document.getElementById('getElem1').innerHTML = 'Dobrodošli v JavaScript vadnico!'
            document.getElementById('getElem1').style.border = '1px solid orangered'
            document.getElementById('getElem1').style.borderRadius = '6px'
            document.getElementById('getElem1').style.padding = '10px'
            document.getElementById('getElem1').style.display = "table";
        }
        /* spremenili bomo vrednost atributa src, ki se nahaja v img elementu
        in s tem dejanjem prikazali sliko, ki se nahaja v skript-u */
        document.getElementById("img").src = "/demo/smiley-black.svg";
    </script>
</body>
</html>
REZULTAT