[JS] querySelector 와 getElementBy~

오늘 TypeScript를 공부하면서

querySelector와 getElementBy~을 언제, 어떤 상황에 사용하는 것이 적절한 것인지 이제야 의문이 들어 찾아보게 되었고, 알아본 것을 정리해두려고 한다.

 

먼저 querySelector, getElementbyId, getElementbyClassName을 각각 사용해 보았다.

그리고 결과는 다음과 같다

getElementById의 경우 id에 해당하는 컴포넌트가 1가지라 그에 해당하는 컴포넌트가 나온 것을 볼 수 있다.

getElementByClassName 과 querySelectorAll의 경우 각각 HTMLCollection과 NodeList이라는 데이터 타입으로 return 되었다.

마지막으로 querySelector의 경우 querySelectorAll에서 return 된 것 중 1개만 return 되는 것을 볼 수 있었다.

 

querySelector와 getElementBy~는 큰 차이는 없고 어떤 부분에서는 같은 결과를 보여주는 것도 있다.

 

 

이 두 가지 차이는 Return 되는 값의 타입 차이와 속도의 차이라고 한다.

querySelector의 경우 앞서 코드로 확인한 것처럼 NodeList에 리턴 되고,

getElementsBy~ 의 경우 HTMLCollection에 리턴된다.

 

두 타입 모두 유사 배열이지만 NodeList의 경우 인덱스 번호로만 접근이 가능하지만,

HTMLCollection의 경우 인덱스뿐만 아니라 name, id 로도 접근이 가능하다.

 

속도 측면에서는 getElementByID가 더 빠르고 더 잘 지원이 된다고 한다.

 

속도측면이나 return 결과 값을 다양한 방법으로 다룰 수 있다는 점에서 getElementsBy~ 가 조금 더 장점이 있어 보인다.

 

참고 링크

https://guinatal.github.io/queryselector-vs-getelementbyid/