❣️getElementById 그리고 querySelector 차이점

chloe·2020년 10월 1일

TIL

목록 보기

8/81

한번도 getElementById와 querySelector의 차이점에 대해 크게 생각해본 적이 없다.
이번에 클론코딩으로 자바스크립트를 작성하는데 지금 정리해서 알아두면 좋겠다는 생각에 기록해 본다!

많은 자바스크립트 개발자들은 이 둘의 차이에 대해 잘 모르는 경우가 많다. 그리고 많은 사람들이 querySelector를 사용하지 않는다고 한다!!?(처음 알게 되었당)

위와 관련해서 참고한 블로그가 있다.(출처는 아래) 더블린에서 살고 있는 브라질인 개발자와 익명의 해외 개발자의 자세한 설명 덕분에 많은 것을 얻는다~😙
우선 getElementById는 무엇이고 querySelector()는 무엇인지 살펴보자.

getElementById()는 무엇인가?

element = document.getElementById(id);

id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다.

querySelector()는 무엇인가?

element = document.querySelector(selectors);

selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 일치하는게 없으면 null반환한다.

querySelector vs selectElementById

<form id="userForm">
  <input id="username" type="text" value="Guilherme" />
</form>

위와 같은 코드가 있다고 가정해보자. 우리는 username 요소를 얻고 싶고 이를 변수에 할당하고 싶다.

첫번째로 getElemenyById를 통해 해보자!

var username = document.getElementById("username");

그리고 이번에는 querySelector를 통해 같은 요소를 얻어보자!

var username = document.querySelector("#userForm #username");

위 코드를 보면 알 수 있듯이,querySelector를 통해 우리가 원하는 엘리먼트를 선택하는 것은 더 구체적이고 한정적이다. 그러나 결과는 같다!

querySelectorAll vs selectElementByClassName

아래 코드가 있다고 가정해보자~

<form id="productForm">
  <input id="productOne" class="product" type="text" value="Product 1" />
  <input id="productTwo" class="product" type="text" value="Product 2" />
  <input id="productThree" class="product" type="text" value="Product 3" />
</form>

우리는 모든 products 엘리먼트를 얻고 싶고 이를 변수에 할당하고 싶다.
getElementByClassName을 통해 사용해보자.

var products = document.getElementsByClassName("product");

이번에는 querySelectorAll을 통해 같은 엘리먼트를 얻어보고자 한다.

var products = document.querySelectorAll("#productForm .product");

음.. 결과는 거의 같다. 그러나,getElementsByClassName은 HTMLCollection에 리턴이 되고 querySelectorAll은 NodeList에 리턴이 된다.

💘 그럼 여기서 HTMLcollection은 뭐고 NodeList는 무엇인가??
우선, 간단하게 설명해보면 둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공한다고 한다. HTMLCollection의 항목은 name, id 속성으로도 접근이 가능하지만, NodeList의 항목은 인덱스 번호로만 접근이 가능하다.

마지막 결론

만약 더 구체적인 엘리먼트를 선택하고 싶다면, querySelector그리고 querySelectorAll을 사용해보자!
그러나 위 둘에 비해 getElementByID가 더 빠르고 더 잘 지원이 된다는 것을 알아두자. 참고한 2명의 개발자들은 querySelector대신에 getElementById를 더많이쓴다고 말하고 있다.
참고해야쥐~

참고:https://guinatal.github.io/queryselector-vs-getelementbyid
https://whatabouthtml.com/difference-between-getelementbyid-and-queryselector-180