자바스크립트 HTML 요소 선택하기 - querySelectorAll

HTML 요소를 선택할 때 사용하는 document 오브젝트의 메서드입니다.

querySelectorAll ( )

여러 개의 HTML 요소를 한꺼번에 선택합니다.

참고자료

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Document.querySelectorAll() - Web APIs | MDN

기본 구문 Syntax

document.querySelectorAll("선택할요소");

예를 들어, 웹페이지 내의 모든 p태그를 선택하여 변수 X에 할당합니다.

const X = document.querySelectorAll("p");

선택할 요소는 .className #idName 등과 같이 CSS 선택자를 이용해 선택할 수 있습니다.

예를 들어, 웹페이지 내의 모든 myclass이라는 class 이름을 가진 요소를 선택합니다.

const Y = document.querySelectorAll(".myclass");

 

반환 값 Return value

querySelectorAll 메서드를 실행했을 때 반환되는 값은 NodeList입니다.

예를 들어, 현재 웹페이지에 p태그를 가진 요소가 5개 있습니다.
다음의 코드를 실행하면,

<script>
const X = document.querySelectorAll("p");
console.log(X);
</script>

총 5개의 p태그가 선택되어 변수 X에 할당됩니다. 위 코드를 실행 후 console을 확인하면, 다음과 같이 p태그 리스트가 변수 X에 할당된 것을 확인할 수 있습니다.

▼ NodeList(5)
 ▶ 0: p
 ▶ 1: p
 ▶ 2: p
 ▶ 3: p
 ▶ 4: p

참고자료

• https://developer.mozilla.org/en-US/docs/Web/API/NodeList