[자바 스크립트] 8. DOM 제어

Mar 31, 2025

💡

querySelector는 첫 번째 요소만 반환하고,

querySelectorAll은 여러 요소를 반환


<!DOCTYPE html>
<html>

<body>

    <h2>My First Page</h2>

    <p id="demo"></p>

    <script>
        let demoDom = document.querySelector("#demo");
        demoDom.innerHTML = "Hello World"
    </script>

</body>

</html>


<!DOCTYPE html>
<html>

<body>

    <h2>My Second Page</h2>

    <p class="demo1"></p>
    <p class="demo1"></p>
    <p class="demo2"></p>

    <script>
        let demo1DomList = document.querySelectorAll(".demo1");
        console.log(demo1DomList);
        console.log(demo1DomList[0]);
        console.log(demo1DomList[1]);

        let d1 = demo1DomList[0];
        let d2 = demo1DomList[1];

        d1.innerHTML = "Hello";
        d2.innerHTML = "World";

        let demo2Dom = document.querySelector(".demo2");
        demo2Dom.innerHTML = "Good";
    </script>

</body>

</html>

See more posts

[자바 스크립트] 8. DOM 제어

More articles

[자바 스크립트] 9. 이벤트 기본

[스프링부트] 29. Persistence Context

[자바 스크립트] 7. 불변

[자바 스크립트] 6. 람다식