[JavaScript] querySelector와 getElementById 차이점

seongminn·2021년 12월 31일

목록 보기

1/5

평소에는 아무렇지 않게 지나치던 것들에 갑자기 의문을 품을 때가 종종 있다. 이 포스트를 작성하는 것도 그런 연유에서 시작했고, 대상은 바로 querySelector와 getElementById이다.

둘은 결과적인 측면에서 봤을 때 큰 차이가 없어 보인다. 하지만 개발자들은 보통 getElementById를 사용하는 것을 더 선호한다고 한다. 그 이유는 무엇일까?

getElementById()

const id = document.getElementById('#id');

id 속성을 매개변수로 받고, 해당 id 값을 가진 요소를 찾아내어 반환하는 메소드이다. document에 주어진 id 값을 갖고 있는 요소가 없다면 null을 반환한다. 이 때, 반환값은 HTMLCollection에 리턴된다.

querySelector()

const id = document.querySelector('#id');

css 선택자를 제공 받고, 이를 만족하는 첫번째 element 객체를 반환한다. 만족하는 요소가 없다면 역시 null을 반환한다. 하지만, getElementById와는 다르게 리턴값이 NodeList에 리턴된다.

이 때, HTMLCollection과 NodeList는 유사 배열객체로, 각 항목에 접근하기 위한 인덱스를 제공한다. 차이점이라면, HTMLCollection은 name, id로도 접근이 가능하지만, NodeList는 index 값으로만 접근할 수 있다.

개발자들이 getElementById를 선호하는 이유?

간단하게 말하자면 바로 속도차이다. 일반적으로 querySelector는 getElementById보다 처리 속도가 느리기 때문에 사용을 지양해야 한다는 목소리가 많다.

그렇다면 querySelector는 사용하면 안되는 건가?

이에 대한 내 답변은 바로 ❌이다.
물론 처리 속도 역시 아주 중요한 부분이지만, 동등한 위치에서 고려해 볼 가치가 있는 여러가지 요소들이 있다.

☝🏻 먼저 querySelector는 요소에 불필요한 속성을 부여하지 않아도 된다.

<div id="main">
  <h1 class="title">Title</h1>
</div>

위의 코드에서 getElementById로 h1 요소를 받아오려면 불필요한 id 속성을 추가해야 한다. 물론 getElementByClassName을 활용하는 방법이 있다 하더라도, 이는 배열로 반환하기 때문에 원하는 요소를 선택하기 위해서 인덱스 값을 추가해야 하는 번거로움이 있다.

const title = document.getElementByClassName("title");
title[0];

하지만 querySelector는 css선택자를 활용하기 때문에 id, class 속성까지 활용할 수 있고, 이 뿐만 아니라 input[name=""], h1:first-child 등 다양한 선택자를 활용할 수 있다.

const title = document.querySelector("#main h1.title");

querySelector 선택자의 편의성을 강조하기 위해 불필요하게 선택자를 구체화 해보았다. 또한, querySelectorAll을 사용하면 getElementByClassName과 동일하게 배열 형태로 여러 요소를 받아올 수도 있다.

☝🏻 둘째로, querySelector는 getElementById에 비해 느릴 뿐, 절대적으로 처리 속도가 느린 것은 아니다.

이는 초당 7백만 건의 작업을 처리할 수 있다고 한다. 어느 개발자의 이야기를 인용하자면, jQuery는 분명 querySelector보다 느리다. 하지만 현재 jQuery의 시장 점유율은 77.3%로 어마어마하다.
(2021.12.31 기준 jQuery의 시장 점유율은 78.5%로 약 1.2%p 증가했다.)

이는 속도보다 편의성을 우선시하였기에 발생한 결과이다.