[JavaScript] getElementById와 querySelector

video 태그만을 선택해서 refresh하는 기능을 구현하기 위해서 구글링을 약 두 시간 가량 한 후에 querySelector로 해결했다.
querySelector를 처음 써봤다... 아니 사실 처음 안 걸수도..?

📌 TOC

더 구체적인 엘리먼트를 선택하고 싶다면 querySelector와 querySelectorAll을 사용하자!
(단, getElementById가 조금 더 빠르고 지원이 잘된다.)

📌 getElementById 란?

const Id = document.getElementById(id);

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

📌 querySelector 란?

const selector = document.querySelector(selectors);

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

📌 querySelector 특징

📍 다양한 선택자

getElementById는 id 속성에 국한되어 id 속성만 선택자로 사용할 수 있지만,
querySelector는 id, class,[data-*=""], input[name=""] 등 다양한 선택자를 사용할 수 있다.

document.querySelector('button')

html 태그 자체를 선택하는 것도 가능!

<input name="login" />

위 상황에서 querySelector를 사용하면 name 속성으로 element 객체를 가져올 수 있는데, getElementById를 사용하면 element 객체를 가져오기 위해 필요 없는 id를 추가적으로 부여해야 한다.

📍 보기 좋은 코드

<button class="btn btn-success">성공</button>
<button class="btn btn-warning">실패</button>

document.getElementsByClassName("btn-success")[0];

getElementsByClassName은 배열로 반환하기 때문에 단일 요소를 가져오기 위해 [0]을 사용해야 한다.

document.querySelector('.btn-success');

반면, querySelector는 한 개만 반환하기 때문에 [0]을 붙여주지 않아도 된다.

📌 getElementById vs querySelector

userName 요소를 얻어 변수에 할당하고 싶다고 생각해보자.

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

📍 getElementById

let userName = document.getElementById("userName");

📍 querySelector

let userName = document.querySelector("#userForm #userName");

querySelecetor를 통해 엘리먼트를 선택할 경우 더 구체적이고 한정적인 엘리먼트를 선택할 수 있다.

📌 getElementByClassName vs querySelectorAll

모든 products 엘리먼트를 얻어 변수에 할당하고 싶다고 생각해보자.

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

📍 getElementByClassName

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

📍 querySelectorAll

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

getElementByClassName은 HTMLCollection에, querySelectorAll은 NodeList에 리턴이 된다.

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

• HTMLCollection ? name, id 속성으로 접근 가능
• NodeList ? 인덱스 번호로만 접근 가능

< 참고 : https://velog.io/@chloeee/getElementById-%EA%B7%B8%EB%A6%AC%EA%B3%A0-querySelector-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://bobbohee.github.io/2021-02-12/getelementbyid-versus-queryselector>