HTML DOM querySelectorAll() 메서드

HTML DOM Document 객체

querySelectorAll()지정된 선택자 그룹과 일치하는 문서의 요소 목록을 반환 (문서의 노드를 깊이 우선 순회하는 데 사용됩니다). 반환된 객체는 NodeList입니다.

반환된 NodeList의 요소는 원본 코드에서 등장한 순서로 정렬됩니다.

반환된 NodeList는 인덱스 번호로 접근할 수 있습니다. 인덱스는 0에서 시작합니다.

NodeList는 정적 집합입니다. 이는 DOM의 변경이 해당 집합에 영향을 미치지 않음을 의미합니다.

NodeList의 length 속성을 사용하여 지정된 선택자를 가진 요소의 수를 확인한 후, 모든 요소를 순회하면서 필요한 정보를 추출할 수 있습니다.

문법：

document.querySelectorAll(selectors)

document.querySelectorAll("div");

브라우저 호환성

표에서의 숫자는querySelectorAll() 메서드를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다：

파라미터 값

기술적인 세부 사항

更多实例

class="demo"를 가진 모든 요소를 가져옵니다：

document.querySelectorAll(".demo");

이 예제는 “note” 클래스를 가진 문档 내 모든<div> 요소의 목록을 반환합니다：

document.querySelectorAll("div.note");

문档에서 모든<h1>，<p>와<div> 요소의 배경색:

document.querySelectorAll("h1,　p,　div");

관련 참조

CSS 강의:CSS 선택자

CSS 참조:CSS#id선택자

CSS 참조: CSS .class 선택자

DOM Document querySelector() 메서드

DOM Document getElementsByClassName() 메서드

DOM Document getElementsByTagName() 메서드

HTML DOM Document 객체