[JavaScript] getElementById vs querySelector

■ getElementById  vs querySelector

getElementById	querySelector
id명과 일치하는 엘리먼트 객체 반환	선택자와 일치하는 '첫번 째' 엘리먼트 객체 반환
일치하는 엘리먼트가 없다면 null 반환	일치하는 엘리먼트가 없다면 null 반환
querySelector에 비해 속도가 더 빠름 id 어트리뷰트가 있는 요소 노드를 취득할 때 사용	구체적인 엘리먼트를 선택하고 싶을 때 유용

<form id="studentForm">
  <input id="name" type="text" value="Lynn" />
</form>

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

// querySelector
const name = document.querySelector("#studentForm #name");

---

■ getElementByClassName vs querySelectorAll

getElementByClassName	querySelectorAll
class명과 일치하는 엘리먼트들의 HTMLCollection 반환	선택자와 일치하는 엘리먼트들의 NodeList를 반환

<form id="fruitForm">
  <input id="apple" class="fruit" type="text" value="Apple" />
  <input id="banana" class="fruit" type="text" value="Banana" />
  <input id="tomato" class="fruit" type="text" value="Tomato" />
</form>

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

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

	HTMLCollection	NodeList
사용 목적	DOM의 요소를 다루기 위해	DOM의 요소뿐만 아니라 텍스트, 주석, 속성등의 노드를 다루기 위해
객체 생성	getElementsByTagName(), getElementsByClassName() 기타 여러 메서드의 반환 값	querySelectorAll(),  Node.childNodes의 반환값
DOM의 변경 사항을 실시간으로 반영	예	querySelectorAll() : 아니오 Node.childNodes : 예
유사 배열 객체	예	예
스프레드 문법이나 Array.from()로 배열변환 가능	예	예
for...of 문으로 순회 가능	예	예
for 문으로 순회 가능	예	예
forEach() 메서드로 순회 가능	아니오	예
length(I) 속성으로 길이 가져옴	예	예
장점	DOM의 변경사항을 실시간으로 반영 (단, for문 사용시 주의)	- querySelectorAll() 메서드는 CSS 선택자를 인수로 사용하기 때문에, 원하는 요소를 쉽게 다룰 수 있음 (가장 큰 장점) - 유사 배열 객체이지만, 배열로 변환하지 않고 forEach()메서드로 순회 가능하여 편리함
단점	클래스 이름, 태그 이름으로만 객체를 생성할 수 있기 때문에 원하는 요소를 쉽게 선택하지 못하는 불편함 (가장 큰 단점)	DOM의 변경사항을 실시간으로 반영하는데 불편함이 있음 (Node.childNodes 속성을 사용해야 하는데, 다루기가 불편함)

** HTMLCollection이나 NodeList 객체는 예상과 다르게 동작할 때가 있어, 다루기 까다롭고 실수하기 쉽다. 따라서, 노드 객체 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection과 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.
- 배열로 변환하면, 배열의 유용한 고차함수(forEach, map, filter, reduce등)을 사용할 수 있다.
- HTMLCollection과 NodeList객체는 모두 유사 배열 객체이면서 이터러블이기 때문에, 스프레드 문법이나 Array.from 메서드를 사용하여 간단히 배열로 변환할 수 있다.

** childeNodes 사용 예

const $products = document.getElementById(‘product’);

// childNodes 프로퍼티는 NodeList 객체(live)를 반환한다.
const { childNodes } = $products;

// 스프레드 문법을 사용하여 NodeList 객체를 배열로 변환한다.
[…childNodes].forEach(childNode => {
	$products.removeChild(childNode);
 });
 
 // $products 요소의 모든 자식 노드가 모두 삭제되었다.
  

---

참고 및 출처 :
https://velog.io/@mndwmktm/Javascript-querySelector-vs-getElementById-%EC%B0%A8%EC%9D%B4%EC%A0%90

[Javascript] querySelector vs getElementById 차이점

 
https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-htmlcollection%EA%B3%BC-nodelist-%EB%B9%84%EA%B5%90/

자바스크립트 HTMLCollection과 NodeList  비교 - 코딩에브리바디

 
 - 모던 자바스크립트 Deep Dive