[JavaScript] getElementById와 querySelector 차이점

querySelector와 getElementById 모두 엘리먼트를 반환하는 메서드입니다.

하지만 각각은 사용 방법, 반환 객체, 성능 등에서 차이가 납니다. 

 

이 글을 통해 querySelector와 getElementById를 자세히 비교해보겠습니다.

 

 

---

🎯 getElementById vs querySelector

다음은 id="username"인 input 엘리먼트를 반환하는 예제입니다.

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

// getElemenyById
const username = document.getElementById("username");

// querySelector
const username = document.querySelector("#userForm #username");

 

 

getElementById

element = document.getElementById(id);

• id명과 일치하는 엘리먼트 객체를 반환합니다.
• 일치하는 엘리먼트가 없다면 null을 반환합니다.

 

 

querySelector

element = document.querySelector(selectors);

• 선택자와 일치하는 첫 번째 엘리먼트 객체를 반환합니다.
• 일치하는 엘리먼트가 없다면 null을 반환합니다.

 

---

🎯 getElementByClassName vs querySelectorAll

다음은 class="product"인 input 엘리먼트들을 반환하는 예제입니다.

<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>

// getElementByClassName
const products = document.getElementsByClassName("product");

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

 

 

getElementByClassName

elements = element.getElementsByClassName(names);

• class명과 일치하는 엘리먼트들의 HTMLCollection을 반환합니다.
• (일치하는 엘리먼트가 없다면 빈 HTMLCollection을 반환합니다.)

 

 

querySelectorAll

elementList = parentNode.querySelectorAll(selectors);

• 선택자와 일치하는 엘리먼트들의 NodeList을 반환합니다.
• (일치하는 엘리먼트가 없다면 빈 NodeList을 반환합니다.)

 

 

---

🎯 HTMLCollection vs NodeList

HTMLCollection과 NodeList 모두 반환된 엘리먼트들을 담고 있습니다.

하지만 각각은 사용 가능한 메서드, DOM의 실시간 반영 여부 등에서 차이를 나타냅니다.

 

종류	프로퍼티	메서드
HTMLCollection	HTMLCollection.length	HTMLCollection.item() HTMLCollection.namedItem()
NodeList	NodeList.length	NodeList.item() NodeList.entries() NodeList.forEach() NodeList.keys() NodeList.values()

 

 

HTMLCollection

• getElementsByClassName의 반환값
• 유사 배열
  • 인덱스나 반복문을 통해 요소에 접근 가능하나 배열 메서드는 사용 불가
• Live Collection
  • DOM 변경 사항이 실시간으로 반영됨

 

 

NodeList

• querySelectorAll의 반환 값
• 유사 배열
  • 인덱스나 반복문을 통해 요소에 접근 가능하나 배열 메서드 사용 불가
  • forEach(), entries(), keys(), values()는 사용 가능
• Static Collection (Non-Live Collection)
  
  • DOM의 변경 사항이 실시간으로 반영되지 않음
  • (대부분 NodeList는 Live Collection지만 querySelectorAll의 반환 값은 Static Collection입니다.)

 

 

---

결론

대체로 querySelector는 getElementById에 비해 연산이 느립니다. (약 1.3배)

다만 큰 성능 차이는 아닙니다. querySelector의 초당 연산량은 약 700만 회이기 때문입니다.

또한 querySelector는 getElementByID에 비해 브라우저의 지원 범위가 좁습니다.

 

그러나 querySelector의 장점은 생산성과 편의성의 측면에서 크게 나타납니다.

id, class, [data-*=""],input[name=""]등 다양한 선택자를 사용할 수 있기 때문입니다.

 

저는 성능보다 개발의 편리성에 중점을 두어서 querySelector를 애용하는 편입니다. 😅

다만 정답은 없습니다. 상황에 맞게 사용하는 것도 좋은 방법입니다.

 

Browser compatibility (getElementById)

Browser compatibility (querySelector)