getElementById와 querySelector의 차이점

js프로젝트에서 querySelector를 getElementById로 바꿔 사용하라는 피드백을 받아 찾아보게 되었다.


1. getElementById()

element = document.getElementById('some-id');
// 오직 id 속성에 따라 요소를 선택. 
// 단일 요소 또는 null을 반환
// id 속성은 유일하기 때문에 매우 빠르게 요소를 찾을 수 있음



2. querySelector()

element = document.querySelector('.some-class');
element = document.querySelector('#some-id');
// CSS 선택자를 사용하여 요소를 선택. 이로 인해 복잡한 선택 작업이 가능.
// CSS 선택자와 일치하는 첫 번째 요소만 반환하고, 일치하는 요소가 없으면 null을 반환
// CSS 선택자의 복잡성과 문서의 구조에 따라 결정되는 경우가 많아 getElementById보다 느릴 수 있음



ex)

// getElementById 사용
let elementById = document.getElementById('myId');

// querySelector 사용
let elementByQuerySelector = document.querySelector('#myId');


=> getElementById는 간단하고 빠른 선택 가능
=> querySelector는 CSS 선택자를 이용해 코드의 의도를 더 명확하게 나타낼 수 있기 때문에 더 구체적이고 한정적인 방법으로 요소를 선택