[JavaScript] 06. 선택자 함수

서회정

Mar 31, 2025

Contents

1. querySelector 란 2. querySelectorAll 이란 3. 언제 querySelectorAll을 써야 할까?

1. querySelector 란

💡

CSS 선택자를 이용해 하나의 요소만 선택

가장 첫 번째 요소만 반환


let demoDom = document.querySelector("#demo");
demoDom.innerHTML = "Hello World!";


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

2. querySelectorAll 이란

💡

여러 개의 요소 선택 가능 (NodeList 반환)

선택한 요소들을 배열처럼 다룰 수 있음


let demo1DomList = document.querySelectorAll(".demo1");
console.log(demo1DomList); // 여러 개의 요소 출력

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

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


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

3. 언제 querySelectorAll을 써야 할까?

💡

클래스 선택자 (.)로 요소를 선택할 때

현재는 하나뿐이어도, 나중에 같은 클래스의 요소가 추가될 가능성이 있을 때

웹 서비스의 전체적인 흐름을 고려해서 선택해야 함