DOM 요소 선택 방법 getElementById, querySelector, querySelectorAll

📌 DOM 요소 선택 방법 정리

✅ 1. getElementById()

• id 속성으로 하나만 선택할 때 사용
• 빠르고 간단하지만 id만 가능

const element = document.getElementById("myId");

✅ 2. querySelector()

• CSS 선택자 방식 사용 가능
• 클래스, 태그, 조합 등 가능 (첫 번째 요소만 반환)

const element = document.querySelector(".my-class");
const element2 = document.querySelector("div > p");

✅ 3. querySelectorAll()

• CSS 선택자 방식으로 모든 요소 선택
• NodeList 반환 (배열처럼 forEach 사용 가능)

const elements = document.querySelectorAll("p");

elements.forEach(el => {
  console.log(el.textContent);
});

📊 비교표

메서드	설명	선택 대상	반환값
getElementById()	id로 선택	id만	요소 1개
querySelector()	CSS 선택자 첫 번째 요소	id, class, 태그 등	요소 1개
querySelectorAll()	CSS 선택자 모든 요소	id, class, 태그 등	NodeList