getElemnetById와 querySelector 차이

document.getElementById와 document.querySelector는 JavaScript에서 DOM 요소를 선택하는 데 사용되는 두 가지 메서드입니다.

선택 방법

document.getElementById

:요소의 고유한 ID 값을 사용하여 요소를 선택합니다.
ID는 문서 전체에서 고유해야 합니다.

document.querySelector

: CSS 선택자를 사용하여 요소를 선택합니다.
클래스, 태그 이름, 속성 등 다양한 방법으로 요소를 식별할 수 있습니다.

반환 값

document.getElementById

: 해당 ID에 해당하는 단일 요소(Element) 객체를 반환합니다.

document.querySelector

: CSS 선택자에 해당하는 첫 번째 매칭되는 요소(Element) 객체를 반환합니다.

지원 범위

document.getElementById

: 모든 최신 브라우저와 HTML 문서에서 지원됩니다.

document.querySelector

: 모든 최신 브라우저와 HTML 문서에서 지원됩니다.

유연성

document.getElementById

: 고유한 ID 값을 통해 특정 요소에 접근하므로, 성능 면에서 좋습니다.

document.querySelector

: CSS 선택자의 다양한 조합을 통해 복잡한 쿼리를 수행할 수 있으며, 보다 유연한 검색 기능을 제공합니다.

따라서,

단일 고유 ID로 식별 가능한 경우에는 주로 getElementById가 사용되고, 복잡한 쿼리나 클래스/태그/속성 등 다양한 조건으로 검색해야 하는 경우에는 주로 querySelector가 사용됩니다.