getElementById 그리고 querySelector 차이점

 

자바스크립트로 개발하던중 selector로 html 요소들을 다뤄야 할때가 있을때 마다 

getElemetById 와 querySelector의 차이에 대해서 잘 몰랐습니다. 

두개의 selector에 차이를 알아보았습니다.

 

getElemetById() 란?

getElemetById(id)

element = document.getElementById(id);

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

 

querySelector() 란?

querySelector(selector)

element = document.querySelector(selectors);

selector의 요소와 일치하는 document안에 첫번째 엘리먼트를 반환한다.

일치하는게 없다면 null 반환한다.

 

querySelector vs getElemetById

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

위와 같은 코드가 있다고 가정해보자. 우리는 username 요소를 얻고 싶고 이를 변수에 할당하고 싶다.

 

첫번째로 getElemenyById을 사용하면 

var username = document.getElementById("username");

그리고 이번에는 querySelector를 통해 같은 요소를 얻어보자!

var username = document.querySelector("#userForm #username");

위 코드를 보면 알 수 있듯이,querySelector를 통해 우리가 원하는 엘리먼트를 선택하는 것은 더 구체적이고 한정적이다. 그러나 결과는 같다!

 

querySelectorAll vs selectElementByClassName

아래 코드가 있다고 생각하고!

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

우리는 모든 products 엘리먼트를 얻고 싶고 이를 변수에 할당하고 싶다.
getElementByClassName을 통해 사용해보자.

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

이번에는 querySelectorAll을 통해 같은 엘리먼트를 얻어보고자 한다.

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

결과는 같은 배열을 얻지만, getElementsByClassName은 HTMLCollection에 리턴이 되고 

querySelectorAll은 nodeList를 리턴한다. 

 

궁금한것은 HTMLCollection와 nodeList의 차이점은?

똑같이 배열을 순회할수 있고, 속성값을 찾을수 있다. 

하지만 HTMLCollection의 항목은 name, id속성으로만 접근이 가능하지만, 

nodeList의 항목은 인덱스 번호로만 접근이 가능하다. 

 

결론적으로? 

상황에 따라 적절하게 사용하는것이 가장중요한거같다!! 

저는 더 직관성있게 selector를 잡을때는 querySelector그리고 querySelectorAll을 사용한다.

하지만 위 둘에 비해 getElementByID가 더 빠르고 더 잘 지원이 된다는 것을 알아두자.

 

 

 

 

참고:https://velog.io/@chloeee/getElementById-%EA%B7%B8%EB%A6%AC%EA%B3%A0-querySelector-%EC%B0%A8%EC%9D%B4%EC%A0%90