querySelector(), querySelectorAll() 자바스크립트 요소접근,선택

이번 포스트는 querySelector(), querySelectorAll() 에 대해 알아보겠습니다 .

일단 크게 동작하는 방식은 같습니다. 

특정 name, id, class등을 이용해서 요소를 타겟으로 잡고 수정하거나 접근해서 정보를 가져올수 있습니다. 

하지만 querySelector()는 타겟의 자식요소 한가지만 가져오고 

querySelectorAll()은 모두 가져오게 됩니다. 

예제를 보며 설명드리겠습니다. 

섹션

섹션

섹션

섹션

<li class="section">섹션</li>
<li class="section">섹션</li>

const sections = document.querySelector(".section");
const sections2 = document.querySelectorAll(".section");

같은 html 태그이고 같은 클래스를 타겟을 잡았지만 

querySelector()를 사용하면 첫번째 li태그만 수정이 되고 

querySelectorAll()를 사용하면 모든 li태그가 수정이 됩니다. 

jQuery에서 .클래스명 으로 타겟을 잡는것과 흡사하지만 

querySelector()를 사용하면 첫번쨰 자식만 타겟으로잡고 

querySelectorAll()를 사용하면 타겟을 배열형식으로 받습니다. 

그럼으로 두번째 버튼에서 css를 수정할때는 for문을 이용해서 css수정을 하였습니다. 

차이점을 잘 이용해서 다양한 방법으로 타겟을 잡을수 있게 연습하면 될것 같습니다. 

끝으로 querySelector(), querySelectorAll()는 jQuery와 큰 속도차이가 없다고 합니다. 

저사양에서는 querySelector(), querySelectorAll()가 약간 우수하다고 합니다. 

그러나 지난 포스팅에서 다뤘던 getElementById()는 무려 10배이상 빠르다고 합니다. 

2019/01/23 - [IT/JAVASCRIPT] - 바닐라스크립트에서 이벤트리스너 (addEventListener)

각자 사양과 상황에 맞춰서 최적의 효율과 최고의 효과를 얻으시길 바랍니다.