[자바스크립트] 4. Dom 제어

문정준

Mar 31, 2025

Contents

1. Script의 위치 2. Dom 제어 함수

1. Script의 위치

HTML 내 script 위치는 제어할 DOM보다 아래에 존재해야 함

위에서 한 줄씩 렌더링을 진행하므로, script가 위에 있으면 제어할 DOM을 찾지 못함
body의 맨 아래쪽에 존재하는 것이 좋음

2. Dom 제어 함수

querySelector : 하나의 dom을 제어 : Object


<!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>

querySelectorAll : 여러 개의 dom을 제어 : Collection


<!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);


        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>

querySelector, querySelectorAll ⇒ dom 지정 방법은 css와 동일

id : #id
class : .class
tag : tag

See more posts

[자바스크립트] 4. Dom 제어

1. Script의 위치

2. Dom 제어 함수

[자바스크립트] 6. JSON

[자바스크립트] 5. Event

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

[자바스크립트] 2. 문법