JS - getElementById, querySelector

getElementById와 querySelector의 차이점

getElementById() 란?

element = document.getElementById(id);

id를 기준으로, 요소에 대한 reference를 반환한다.
만약 document에 해당 ID element가 존재하지 않는다면 Null을 반환한다.

querySelector() 란?

element = document.querySelector(selectors);

selector의 구역과 일치하는 document의 첫번째 요소를 반환한다.
일치하는게 존재하지 않는다면 Null을 반환한다.

---

<ul>
 <li id="web-id">PHP</li>
 <li>HTML</li>
 <li class="web-class">CSS</li>
 <li class="web-class">JavaScript</li>
</ul>

위에 예제에서 CSS태그를 잡으려면 어떠한 방법을 사용해야 할까?

document.getElementByID()는 관련 id, class가 명확하게 선언되어 있지 않기에 힘듦.

하지만, documne.querySelector()는 아래와 같이 두가지로 찾을 수 있다. (첫번째 요소를 반환하기 때문)

document.querySelector('ul li.web-class').innerHTML;

document.querySelector('li.web-class').innerHTML;

---

처리속도

getElementById가 querySelector보다 더 빠르다.
보통의 경우 getElementById를 사용하지만, 규모가 커지고 모든 페이지에 id를 추가하지 못할 경우라면? querySelector를 사용해야 할 것이다.

또한, 속도 측면에서 비교해놓은 글을 보았다.
큰 차이가 없다는 것을 볼 수 있다.

출처 : https://bobbohee.github.io/2021-02-12/getelementbyid-versus-queryselector

---

결론

id요소로 객체를 찾을 수 있다면 getElementById가 좋을 것이고,
규모가 커져 그 외의 경우라면 querySelector를 사용하면 될듯하다.