[JavaScript] querySelector 과 querySelectorAll 의 차이

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

---

querySelector()

• 지정된 선택자와 일치하는 문서 내 첫 번째 element를 반환
• 일치하는 요소가 없으면 null 반환
• selecotrs는 유효한 css 선택자여야 함

querySelectorAll()

• 지정된 선택자 그룹과 일치하는 문서 내 element 목록을 반환 (NodeList로 반환)
• 일치하는 것이 없는 경우에는 빈 NodeList 반환

확인!

querySelector는 element 하나를 가져오지만, querySelectorAll은 NodeList로 가져오므로, 함수에서 실행 시, 반복문을 통해 배열을 실행시켜야 함
ex) for, for each ...

참고자료 : MDN

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