document.getElementById(id)

The getElementById() method returns the element whose id matches the supplied value, or null if no such element exists. It is one of the most frequently used DOM methods because it is needed virtually every time we want to read from or modify the document.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<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>The getElementById() method returns the element with the given value</h1>
    <div onclick="prikaz()">
        <p>Welcome to the <span id="demo">JavaScript</span> tutorial!</p>
    </div>
    <hr>

    <h4>The getElementById() method can also be used for a search where we look for HTML elements 
        with a CSS selector.</h4>
    <form id="input">
        <label for="prvi">First number:</label>
        <input id="prvi" type="text" value="13" class="in"><br><br>
        <label for="drugi">Second number:</label>
        <input id="drugi" type="text" value="27" class="in">
    </form><br>

    <button onclick="Selector()" class="btn">Find numbers</button>
    <p id="search_engine"></p>
    <hr>

    <h4>The getElementById() method returns the element with the given value and returns null if the 
        element does not exist.</h4>
    <button class="bn" onclick='getElement()'>PRESS THE BUTTON</button>

    <p id='getElem2'><b>FIRST ID</b></p>
    <p id='getElem3'>SECOND ID</p>

    <b id='getElem1'></b>
    <hr>

    <img id="img" src="/demo/smiley-face.png" alt="smiley" style="width: 5%; height: auto">
    <hr>

    <script>
        // Change element with an onclick function
        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)";
        }
        // Search HTML elements
        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("search_engine").innerHTML = txt;
            document.getElementById("search_engine").style.border = "1px solid green";
            document.getElementById("search_engine").style.borderRadius = "6px";
            document.getElementById("search_engine").style.padding = "15px";
            document.getElementById("search_engine").style.fontSize = "30px";
            document.getElementById("search_engine").style.fontFamily = "Consolas, sans-serif";
        }
        // Return an element with the given value
        function getElement() {
            document.getElementById('getElem1').innerHTML = "Welcome to the JavaScript tutorial!";
            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";
        }
        /* We will change the src attribute of the img element
           and thereby display the image located in the script */
        document.getElementById("img").src = "/demo/smiley-black.svg";
    </script>
</body>
</html>
RESULT