[지식루프 IT공부] document.querySelector와 document.getElementById 차이

자바스크립트에서 DOM(Document Object Model)을 조작할 때 자주 사용하는 메서드인 document.querySelector와 document.getElementById를 설명하고, 두 메서드의 차이점을 정리해볼게요.

---

document.querySelector란?

document.querySelector는 CSS 선택자(selector)를 사용해서 DOM에서 요소를 선택하는 메서드예요. 선택자에 맞는 첫 번째 요소를 반환합니다.

사용법

 

const element = document.querySelector('선택자');

• 선택자: CSS에서 사용하는 선택자 문자열 (예: '#id', '.class', 'tag', 'div > p' 등).
• 반환값: 선택자에 맞는 첫 번째 요소(Element 객체)를 반환하거나, 일치하는 요소가 없으면 null.

예제

 

// ID로 선택 const byId = document.querySelector('#myId'); // 클래스명으로 선택 const byClass = document.querySelector('.myClass'); // 태그명으로 선택 const byTag = document.querySelector('div'); // 복잡한 선택자 const complex = document.querySelector('div.container > p:first-child');

특징

• CSS 선택자 기반: CSS에서 쓰는 모든 선택자를 사용할 수 있어서 매우 유연함.
• 첫 번째 요소만 반환: 여러 요소가 조건에 맞아도 첫 번째 것만 가져옴.
• 성능: 선택자를 파싱하고 DOM을 탐색하므로 비교적 느릴 수 있음.

---

document.getElementById란?

document.getElementById는 요소의 id 속성을 기준으로 DOM에서 요소를 선택하는 메서드예요. 주어진 ID와 일치하는 단일 요소를 반환합니다.

사용법

 

const element = document.getElementById('아이디');

• '아이디': HTML 요소의 id 속성 값 (문자열).
• 반환값: ID에 맞는 요소(Element 객체)를 반환하거나, 없으면 null.

예제

javascript

CollapseWrapCopy

<div id="myId">Hello</div> <script> const element = document.getElementById('myId'); console.log(element); // <div id="myId">Hello</div> </script>

특징

• ID 기반: 오직 id 속성으로만 요소를 찾음.
• 단일 요소 반환: ID는 HTML에서 고유해야 하므로 항상 하나의 요소만 반환.
• 성능: ID는 DOM에서 빠르게 인덱싱되므로 매우 빠름.

---

document.querySelector와 document.getElementById의 차이점

 

 

---

언제 무엇을 써야 할까?

1. document.getElementById
   • 특정 id로 요소를 빠르게 찾고 싶을 때.
   • 성능이 중요한 상황에서.
   • 예: <div id="header">를 바로 가져오고 싶을 때.
2. document.querySelector
   • CSS 선택자를 활용해 복잡한 조건으로 요소를 찾고 싶을 때.
   • 클래스, 태그, 속성 등 ID 외의 기준으로 요소를 선택해야 할 때.
   • 예: .active 클래스를 가진 첫 번째 <li>를 찾고 싶을 때.

추가 팁

• 다중 요소 선택: querySelector는 하나만 반환하지만, document.querySelectorAll을 쓰면 조건에 맞는 모든 요소를 NodeList로 가져올 수 있어요. 반면 getElementById는 ID가 고유하므로 다중 선택 불가.
• 실무에서: 간단한 ID 기반 작업은 getElementById로, 복잡한 선택은 querySelector나 querySelectorAll로 쓰는 게 일반적이에요.