document.getElementById(id);
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>getElementById() 예제</title>
    </head>
    <body>
        <p id="hello">환영합니다. 반갑습니다!</p>
        <script>
            const changeColor = newColor => {
                const ele = document.getElementById("hello");
                ele.style.color = newColor;
            }
        </script>
        <button type="button" onclick="changeColor('red');">빨간색으로 변신</button>
        <button type="button" onclick="changeColor('blue');">파란색으로 변신</button>
    </body>
</html>
실제 적용된 모습 버튼을 클릭해 보세요!
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>찾으려는 요소가 없을 때 에러 발생</title>
    </head>
    <body>
        <button type="button" id="btn1">btn1 버튼</button>
        <button type="button" id="btn2">btn2 버튼</button>
        <button type="button" id="btn3">btn3 버튼</button>
        <script>
            /* id="btn4" 요소는 없습니다. */
            const btn4 = document.getElementById("btn-4"); // id="btn4"와 일치하는 요소를 찾습니다.
            
            // btn4는 요소 객체가 아닌 null이 됩니다.

            // Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
            btn4.addEventListener("click", () => {
                // ...
            });
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>찾으려는 요소가 없을 때 에러 발생</title>
    </head>
    <body>
        <button type="button" id="btn1">btn1 버튼</button>
        <button type="button" id="btn2">btn2 버튼</button>
        <button type="button" id="btn3">btn3 버튼</button>
        <script>
            /* id="btn4" 요소는 없습니다. */
            const btn4 = document.getElementById("btn-4"); // id="btn4"와 일치하는 요소를 찾습니다.

            // btn4는 요소 객체가 아닌 null이 됩니다.

            if (btn4) {
                btn4.addEventListener("click", () => {
                    // ...
                });
            } else {
                console.warn("아이디가 'btn4'인 요소를 찾을 수 없습니다.");
            }
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>찾으려는 요소가 없을 때 에러 발생</title>
    </head>
    <body>
        <button type="button" id="btn1">btn1 버튼</button>
        <button type="button" id="btn2">btn2 버튼</button>
        <button type="button" id="btn3">btn3 버튼</button>
        <script>
            /* id="btn4" 요소는 없습니다. */
            const btn4 = document.getElementById("btn-4"); // id="btn4"와 일치하는 요소를 찾습니다.

            // btn4는 요소 객체가 아닌 null이 됩니다.

            try {
                btn4.addEventListener("click", () => {
                    // ...
                });
            } catch (error) {
                console.warn("아이디가 btn4인 요소를 찾을 수 없습니다.");
            }
        </script>
    </body>
</html>
<div id="user-info"></div>
getElementById("User-id");
getElementById("User-Id");
getElementById("USER-ID");
getElementById("user-id");
<div id="container">
    <div id="child"></div>
</div>
const container = document.getElementById("container");

// Uncaught TypeError: container.getElementById is not a function
const child = container.getElementById("child");
const child = document.getElementById("child");