getElementById ? querySelector ? 뭘 써야 해 .. ?

호홯하ㅓㅎ허ㅏㅏㅎ

하이하히아힝하이

 

이번엔 요소를 잡아오는 getElementById 와 querySelector의 차이점을 알아볼거야!

원래 같으면 제이쿼리로다가 $('#id')나 $('.class')로 편하게 사용하겠지만 이제는 안돼..

본질을 알아야 나중에 이게 이렇게 돌아가는구나라는 짐작이라도 하겠지!!

 

뭐 써야 돼.. 나 결정장애라고ㅠㅠ

 

가보자고~~

 

우선, 난 답답한건 싫어하니까 답부터 보고 가자!

 

사실 정답은 생각하기 나름이겠지만! 굳이 답을 얘기해보자면!

getElementById!!

 

두 가지 기능 모두 좋지만 상황에 맞게 써야 해!

getElementById를 사용하라고 했지만, querySelector를 사용하지 말아야지! 라는 강박은 없어도 돼!!

 

만약, 페이지가 복잡하고 모든 페이지에 ID를 추가하지 않으려면 querySelector를 사용하는 것이 좋아!

 

 

---

 

 

그럼, 차이점을 알아보자고!

 

document.getElementById('id');

document.getElementById는 요소의 ID를 기준으로 요소에 대한 reference를 반환하고

지정한 ID를 가진 요소가 문서에 없으면 null을 반환해 !

 

document.querySelector('#id');

document.querySelector는 선택한 요소의 그룹과 일치하는 문서 내의 첫번째 요소를 반환해!

만약 일치하는 항목이 없다면 null을 반환!

 

 

자, 예를 들어보자!

<ul>
 <li id="web-id">PHP</li>
 <li>HTML</li>
 <li class="web-class">CSS</li>
 <li class="web-class">JavaScript</li>
</ul>

예제에서 CSS의 태그를 잡아봐!

난감하지 ?

 

document.getElementById()는 관련된 id나 class가 정확하게 선언되어 있지 않기 때문에 힘들어(물론 불가능한건 아니야 ..)

 

이 때, document.querySelector()는

document.querySelector('ul li.web-class').innerHTML;

document.querySelector('li.web-class').innerHTML;

이 두가지로 잡아 올 수 있지!

왜냐? 아까 말했듯이 querySelector는 선택한 요소의 첫번째 요소를 반환한다고 위에서 말했지!

 

결과적으로,

처리 속도는 getElementById가 querySelector보다 더 빠르고 지원이 잘 돼!

그래서 querySelector대신 거의 getElementById를 사용하지만

페이지가 복잡하고 모든 페이지에 ID를 추가하지 않으려면 querySelector를 사용해!

 

 

다음 글에서 또 봥~

 

 

출처 : whatabouthtml.com/difference-between-getelementbyid-and-queryselector-180