[자바스크립트] Cannot read properties of null (getElementById 와 querySelector차이점)

getElementById와 querySelector는 엘리먼트를 지정한다는 측면에서 차이가 없는 것인데 따로 만들어 사용하는 이유는 뭘까?

getElementById VS querySelector 차이

1. Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.(MDN)
2. Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.(MDN)

<form id="screen">
  <input id="login" type="text" value="ID" /> //1번
  <input class="login" type="text" value="ID"/> //2번
</form>

var username1 = document.getElementById("login");//1번 

var username2 = document.querySelector("#screen #login");//1번

var username2 = document.querySelector("#screen .login");//2번

위 3개의 username 1,2,3이 불러오는 엘리먼트는 주석과 같다.
ID로 지정된 엘리먼트를 호출 할때는 getElementById가 유리하지만 class와 다양한 엘리먼트를 지목해서 불러오려면 quertSelector이 유리할것으로 보인다.

 

 

 

 

참조 : Error) Cannot read properties of null 해결 (getElementById VS querySelector 차이) (velog.io)