[Javascript] querySelector vs getElementById 차이점

사이드 프로젝트 하다가 문득 궁금해져서 찾아봤다

참고 블로그

https://seokzin.tistory.com/entry/JavaScript-getElementById%EC%99%80-querySelector-%EC%B0%A8%EC%9D%B4%EC%A0%90

querySelector vs getElementById

getElementById

element = document.getElementById

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

querySelector

element = document.querySelector(selectors);

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

예제

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

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

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

querySelector와 getElementById 모두 엘리먼트를 반환하는 메서드이지만 주로 실무에서는 getElementById가 더 많이 쓰인다고 한다. 이유는 getElementById가 더 빠르고 더 지원이 잘 되기 때문이다. 그러나 구체적인 엘리먼트를 선택하고 싶다면 querySelector나 querySelectorAll 사용하기 !

getElementByClassName vs querySelectorAll

getElementByClassName

elements = element.getElementsByClassName(names);

• class명과 일치하는 엘리먼트들의 HTMLCollection 반환

querySelectorAll

elementList = parentNode.querySelectorAll(selectors);

• 선택자와 일치하는 엘리먼트들의 NodeList를 반환

예제

<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");