[자바스크립트(Java Script)]4.자바스크립트 DOM 다루기: 요소 선택과 조작

손영민

Apr 14, 2025

Contents

1. 단일 요소 선택하기 (querySelector)2. 여러 요소 선택하기 (querySelectorAll) 3. querySelector vs querySelectorAll 차이점 innerHTML 속성 요약

웹 페이지를 동적으로 만들기 위해서는 자바스크립트로 DOM(Document Object Model)을 조작하는 방법을 알아야 합니다.

이 글에서는HTML 요소를 선택하고 내용을 변경하는 기본적인 방법을 다룹니다.

1. 단일 요소 선택하기 (querySelector)

querySelector는 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.

ID, 클래스, 태그 등 모든 CSS 선택자를 사용할 수 있습니다.

예제 1: ID로 요소 선택하기


html
복사
<!DOCTYPE html>
<html>
  <body>
    <h2>My First Page</h2>

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

    <script>
      let demoDom = document.querySelector("#demo");
      demoDom.innerHTML = "HelloWorld";
    </script>
  </body>
</html>

코드 설명

querySelector("#demo")를 사용하여 ID가 "demo"인 요소를 선택합니다.

innerHTML 속성을 사용하여 내용을 "Hello, World!"로 변경합니다.

2. 여러 요소 선택하기 (querySelectorAll)

querySelectorAll은 CSS 선택자와 일치하는 모든 요소를 NodeList로 반환

합니다. 이 NodeList는 배열과 유사하게 인덱스로 접근 할 수 있습니다.

예제 2: 클래스로 여러 요소 선택하기


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 demo2DomList = document.querySelector(".demo2");
      demo2DomList.innerHTML = "Good";
    </script>
  </body>
</html>

코드 설명

querySelectorAll(".demo1")을 사용하여 클래스가 "demo1"인 모든 요소를 선택합니다.

console.log(demo1DomList); → NodeList 출력

demo1DomList[0], demo1DomList[1] → 첫 번째, 두 번째 요소에 접근

첫 번째 요소 .demo1의 내용을 "Hello"로 변경

두 번째 요소 .demo1의 내용을 "World"로 변경

querySelector(".demo2")를 사용하여 클래스가 "demo2"인 첫 번째 요소를 선택하고 "Good"으로 설정

3. `querySelector` vs `querySelectorAll` 차이점

메서드	반환값	예제
`querySelector()`	첫 번째 요소만 반환	`document.querySelector(".demo")`
`querySelectorAll()`	모든 요소를 NodeList로 반환	`document.querySelectorAll(".demo")`

querySelector() → 하나의 요소만 선택할 때 사용

querySelectorAll() → 여러 개의 요소를 선택할 때 사용

innerHTML 속성

innerHTML 속성은 요소 내의, HTML 또는 XML 마크업을 포함한 내용을 가져오거나 설정할 수 있게 해줍니다. 이를 통해 요소의 내용을 동적으로 변경할 수 있습니다.

요약

자바스크립트를 사용하여 DOM 요소를 선택하고 조작하는 것은 인터랙티브한 웹 페이지를 만드는 기본입니다. querySelector와 querySelectorAll 메서드를 사용하면 CSS 선택자와 동일한 문법으로 요소를 선택할 수 있으며, innerHTML과 같은 속성을 사용하여 요소의 내용을 변경할 수 있습니다.

이러한 기본 개념을 이해하면 더 복잡한 DOM 조작도 가능해집니다.

Contents

1. 단일 요소 선택하기 (querySelector)2. 여러 요소 선택하기 (querySelectorAll) 3. querySelector vs querySelectorAll 차이점 innerHTML 속성 요약

html 복사 <!DOCTYPE html> <html> <body> <h2>My First Page</h2> <p id="demo"></p> <script> let demoDom = document.querySelector("#demo"); demoDom.innerHTML = "HelloWorld"; </script> </body> </html>

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 demo2DomList = document.querySelector(".demo2"); demo2DomList.innerHTML = "Good"; </script> </body> </html>