[JavaScript] querySelector 과 querySelectorAll 의 차이

학습 예제를 살펴보던 중, 정확한 사용의 차이를 파악하기 위해 찾아 정리하게 되었다.

---

querySelector()

- 지정된 선택자와 일치하는 문서 내 첫 번째 element를 반환

- 일치하는 요소가 없으면 null 반환

- selecotrs는 유효한 css 선택자여야 함

 

querySelectorAll()

- 지정된 선택자 그룹과 일치하는 문서 내 element 목록을 반환 (NodeList로 반환)

- 일치하는 것이 없는 경우에는 빈 NodeList 반환

 

 

확인!

querySelector는 element 하나를 가져오지만, querySelectorAll은 NodeList로 가져오므로,

함수에서 실행 시, 반복문을 통해 배열을 실행시켜야 함

ex) for, for each ...

 

---

 

 

참고자료

MDN

 

※잘못된 정보는 댓글로 알려주시면 감사하겠습니다 :)