[TIL #73] 최종프로젝트 #22 JS getElementById vs querySelector

js파일을 수정하다가 문득 getElementById로도 html태그를 잘 가져오고 querySelector로도 잘 가지고 오는데 무슨 차이가 있는지 궁금해졌습니다.

지금 보시는 코드는 모두 동일한 결과를 가집니다.
찾는 항목이 없을 때 null을 가져오는 것까지 일치합니다.

document.getElementById(`comment-content-${comment.id}`).innerText = comment.content;
document.querySelector(`#comment-content-${comment.id}`).innerText = comment.content;

결론부터 말씀드리자면 둘 다 사용해도 크게 상관은 없을 것 같습니다.

일단 querySelector는 getElementById에 비해 속도가 1.2배 정도 느리다고 합니다.
그래서 id를 가진 태그를 불러올 때 getElementById에를 사용하는게 훨씬 유리하다고 보는게 맞지만
querySelector는 이미 밀리 초당 7,000건의 작업을 처리할 정도의 속도를 가지고 있어 유의미한 차이를 낸다고 판단하기 어렵습니다.

따라서 정확히 복잡도를 중시하며 사용한다면 getElementById가 정답이겠지만 querySelector를 사용하는게 훨씬 편리하다고 느낀다면 querySelector를 사용하는게 편의성이나 생산성으로나 옳다고 생각됩니다.