getElementById와 querySelector

getElementById만 주로 사용해서 querySelector와의 딱히 생각해본 적이 없는데, 오늘 정리해본다.

getElementById

const element = document.getElementById(id);

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

getElementByClassName

const element = document.getElementByClassName(className);

class이름을 통해 엘리먼트를 반환한다. document에 구체적인 class 엘리먼트가 없으면 null을 반환한다.

만약 main이라는 id를 가진 요소의 하위 요소들 중 test라는 클래스를 가진 모든 요소를 탐색하고 싶으면 아래와 같이 하면 된다.

document.getElementById('main').getElementsByClassName('test');

querySelector

const element = document.querySelector(selectors);

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

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

모든 product 엘리먼트를 찾고 싶으면 아래와 같이 사용하면 된다.
getElementByClassName예시

const products = document.getElementsByClassName('product');

querySelector를 이용한 예제

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

getElemntsByClassName은 HTMLCollection이 리턴이 되고, querySelectorAll이 NodeList에 리턴이 된다.

HTMLCollection은 name, id, index번호로 접근이 가능하지만 NodeList는 index 번호로만 접근 가능해진다.

---

참고자료

chlee.log - getElementById 그리고 querySelector 차이점
Guilherme Natal de Mello - querySelector vs getElementById
나트루 blog - getElementById / querySelector 차이