[TIL] querySelector와 getElementById의 차이점

 

querySelector

document.querySelector(selectors);

document.querySelector는 'selectors'와 일치하는 문서 내의 첫 번째 element를 반환한다. 일치하는 요소가 없다면 null 반환.

 

getElementById

document.getElementById(id);

document.getElementById는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾아 이를 나타내는 element 객체를 반환한다. 일치하는 요소가 없다면 null 반환.

id가 없는 요소에 접근하려면 querySelector를 사용한다.

 

차이점

• querySelector보다 getElementById가 더 빠르다.
• querySelector는 다양한 선택자를 사용할 수 있다. (getElementById는 id속성만 사용 가능)

---

결론

그래서 도대체 뭘 언제 써야 하느냐.

id로 찾고싶으면 getElementById로, name이나 다른 선택자를 사용하고 싶다면 querySelector를 사용하면 될 것 같다.

성능 차이가 있다고는 하나, 생산성이나 편의성을 생각했을 때 querySelector를 사용해도 무방하다!