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

Apr 02, 2025

Contents

document.querySelector()document.querySelectorAll()


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

document.querySelector()

: 특정 요소 하나만 선택하고 조작할 때


let demo2Dom = document.querySelector(".demo2");
demo2Dom.innerHTML = "Good";

document.querySelectorAll()

: 여러 요소를 선택해서 반복 처리하거나 일괄 변경할 때


let demo1DomList = document.querySelectorAll(".demo1");
console.log(demo1DomList);

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

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