dom - getElementById &querySelector

getElementById()는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환, 없으면 null 반환 ID는 문서내 유일하기 때문에 특정요소 찾을 때 유용 ID가 없는 요소에 접근하고 싶다면 querySelector를 사용하는데

document.getElementById(id);

 

querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째 Element를 반환, 없으면 null 선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll() 사용

document.querySelector(selectors);

 

두개의 차이점은 아래의 코드에서 볼수 있다.

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

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

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

 

 

 

 

결과는 같다. 하지만 getElementsByClassName은 HTMLCollection에 리턴된다. querySelectorAll은 NodeList에 리턴한다.

이는 두개다 인덱스를 제공하고 getElementsByClassName는 name,id 속성으로 접근이 가능하지만, NodeList는 인덱스 번호로만 접근가능하다

 

https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

https://guinatal.github.io/queryselector-vs-getelementbyid/