document.getElementById와 document.querySelector의 차이

document.getElementById("id명")

특징

• id 속성으로만 요소를 찾음
• 고유한 ID를 대상으로 하기 때문에 한 페이지에서 단 하나만 선택 가능
• 반환값은 HTMLElement (없으면 null)

속도

단순히 id로만 찾기 때문에 querySelector보다 보통 더 빠름

<div id="box">안녕</div>
<script>
  const el = document.getElementById("box");
  console.log(el.textContent); // "안녕"
</script>

document.querySelector("선택자")

특징

• CSS 선택자 문법을 사용해서 요소를 찾음
• id, class, 태그명, 속성 등 복잡한 조건으로 선택 가능
• 조건에 맞는 첫 번째 요소 하나만 반환 (없으면 null)

<div id="box" class="red">첫 번째</div>
<div class="red">두 번째</div>
<script>
  const el1 = document.querySelector("#box");   // id 선택
  const el2 = document.querySelector(".red");   // class 선택 (첫 번째 red만)
  console.log(el1.textContent); // "첫 번째"
  console.log(el2.textContent); // "첫 번째"
</script>

차이 정리

구분	getElementById	querySelector
선택 기준	id 속성만	CSS 선택자 (#id, .class, div > p 등)
반환 값	해당 id 요소 (하나만)	조건에 맞는 첫 번째 요소
여러 요소 선택 가능?	❌ (항상 하나)	❌ (첫 번째만), 여러 개는 querySelectorAll
속도	더 빠름	조금 느릴 수 있음
사용 예시	document.getElementById("box")	document.querySelector("#box"), document.querySelector(".red")