getElementById VS querySelector

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

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

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

getElementById & querySelector

• element를 반환하는 메서드
• 일치하는 element없다면 null 반환

getElementById

element = document.getElementById(id);

➡️ id명과 일치하는 element 반환

querySelector

element = document.querySelector(selectors);

➡️ 선택자와 일치하는 첫번째 element 반환

성능 차이

• getElementById < querySelector
• getElementById를 쓰는 것이 성능이 더 좋음!!