자바스크립트 getElementById, querySelector 차이점

이번 포스팅에서는 getElementById와 querySelector 차이점에 대해서 알아보려고 합니다. 클론 코딩을 하는 중에 lementById를 쓸 때도 있고, querySelector을 쓸 때도 있는데, 쓰임이 다른 이유가 궁금했습니다. 

section, li

    <section id="outter">
      <header>
        <h2>Black Box</h2>
      </header>
      <ul>
        <li id="inner" class="card">
          <h2>Blue Box</h2>
        </li>
      </ul>
    </section>

---

getElementById()

getElementById를 사용하면 넘겨받은 문자열과 같은 id를 가진 idelement object를 반환합니다. ID는 단 하나의 유일한 값이기 때문에 getElementById를 사용하면 특정한 element에 접근할 수 있습니다. 하지만 모든 element가 Id값을 가지는 것은 아니므로, id 값이 없는 경우에 querySelector()를 사용하여 element를 찾을 수 있습니다. 

getElementById 반환

console.log(document.getElementById('outter'));

getElementById의 결과로 아래 사진처럼 결과가 나옵니다. ID와 맞는 DOM element를 알려주는 element Object가 return 값입니다. 만약에 찾는 id값이 document에 없다면 null을 반환합니다. 그리고 getElementById를 사용하고 싶은데, getElementById is not defined가 뜨는 경우라면 document를 사용했는지 꼭 확인해 보세요. getElementById는 document Object의 method 중 하나이기 때문에, 사용하기 전에 document 입력이 필요합니다. 

getElementById return

---

querySelector()

querySelector도 document의 method입니다. document에서 받은 선택자(selector)와 첫 번째로 일치하는 element를 반환합니다. 만약에 일치하는 값이 없다면 null을 반환합니다. 

console.log(document.querySelector('#outter'));

querySelector 반환

console.log(document.getElementById('outter') === document.querySelector('#outter')); 
//true 반환

querySelector로 반환받은 결과와 getElementById로 반환받은 값은 같습니다. 

결론

id값을 알고 있는 경우에는 getElementById를 사용하고, id값을 모르는 경우에는 querySelector를 사용해서 찾고 싶은 document element에 접근할 수 있다. 그리고 getElementById의 경우에는 id와 일치하는 문자열을 전달하고, querySelector의 경우에는 CSS 선택자에 맞는 문법으로 문자열을 전달한다.