querySelector

document.querySelector() 는 선택한 선택자와 일치하는 문서 내 첫번째 요소를 반환한다.
일치하는 요소가 없으면 null 을 반환한다.

const person = document.querySelector(".className")
const person = document.querySelector("#className")

querySelectorALL

querySelectorALL 은 문서내의 동일한 선택자를 선택하면 모든 요소를 가져올 수 있으며,

선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다.

const person = document.querySelectorAll("#id , .class")

getElementById()

document.getElementById 는 문서내의 문자열과 일치하는 id 속성을 찾아 값을 반환한다.

const person = document.getElementById("id")

getElementByClassName()

document.getElementByClassName() 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간

HTMLCollection 을 반환한다.

querySelector vs selectElementById

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

선택자로 id = "username" 요소를 얻으려고한다.

querySelector

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

selectElementById

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

두개의 차이점은 querySelector 가 selectElementById 에 비해서 더욱 구체적인 것을 볼 수 있다.

결과는 동일하다.

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>

선택자 form 내부에 있는 input class="product" 의 요소를 얻으려고한다.

querySelectorAll

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

selectElementByClassName

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

getElementsByClassName은 HTMLCollection을 반환하고,
querySelectorAll은 NodeList를 반환된다.

HTMLcollection 과 NodeList란

둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공한다.

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

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

정리

더 구체적인 엘리먼트를 선택하고 싶다면 querySelector 또는 querySelectorAll 를 사용하는 것이 좋다.

그러나 위 둘에 비해 getElementByID가 더 빠르고 더 잘 지원된다.

---

참고자료
https://guinatal.github.io/queryselector-vs-getelementbyid/