HTML DOM 요소 querySelectorAll() 메서드

정의와 사용법

querySelectorAll() 메서드는 지정된 CSS 선택자와 일치하는 요소의 자식 요소 집합을 반환하며, 정적 NodeList 객체로 반환합니다。

NodeList

NodeList는 배열과 유사한 노드 집합(목록)입니다。

목록의 노드는 인덱스(인덱스)를 통해 접근할 수 있습니다. 인덱스는 0에서 시작됩니다。

length 속성은 목록의 노드 수를 반환할 수 있습니다。

다른 것을 참조하세요：

참조 매뉴얼：

classList 속성

className 속성

querySelector() 메서드

getElementsByTagName() 메서드

getElementsByClassName() 메서드

HTML DOM Style 객체

教程：

CSS 문법

CSS 선택자

CSS 선택자 참조 매뉴얼

实例

예제 1

设置 <div> 요소 내 class="example"의 첫 번째 요소의 배경색을 설정합니다：

// id="myDIV" 요소(div)를 가져오고, div 중 class="example"의 모든 요소를 가져옵니다
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// div 중 첫 번째 class="example" (인덱스 0) 요소의 배경색 설정
x[0].style.backgroundColor = "red";

자신의 손으로 직접 시도해 보세요

힌트：페이지 아래에 더 많은 예제가 제공됩니다。

문법

element.querySelectorAll(cssSelectors)

매개변수

매개변수 설명
cssSelectors

필수. 문자열. 하나나 여러 개의 CSS 선택자를 지정하여 요소를 매칭합니다。

CSS 선택자는 id, 클래스, 유형, 속성, 속성 값 등에 따라 HTML 요소를 선택하는 데 사용됩니다。

여러 선택자를 구분하기 위해 각 선택자 사이에 쉼표를 사용합니다。

힌트：모든 CSS 선택자 목록에 대해 우리의 CSS 선택자 참조 매뉴얼。

기술 세부 사항

반환 값：

NodeList 객체는 지정된 CSS 선택자와 일치하는 현재 요소의 모든 자식 요소를 나타냅니다。

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

주의：지정된 선택자가 유효하지 않으면 SYNTAX_ERR 예외를 투척합니다
DOM 버전： Selectors Level 1 Document Object

更多实例

예제 2

获取 <div> 요소 내의 모든 <p> 요소를 가져오고, 첫 번째 <p> 요소(인덱스 0)의 배경색을 설정합니다：

// id="myDIV"의 요소( div)를 가져오고, 그 div 내 모든 p 요소를 가져옵니다
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// div 중 첫 번째 <p> 요소(인덱스 0)의 배경색 설정
x[0].style.backgroundColor = "red";

자신의 손으로 직접 시도해 보세요

예제 3

获取 <div> 中 class="example" 的所有 <p> 元소를 가져오고, 첫 번째 <p> 요소의 배경을 설정합니다：

// id="myDIV"의 요소( div)를 가져오고, 그 div 내 모든 class="example"의 p 요소를 가져옵니다
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// div에서 class="example"의 첫 번째 <p> 요소 (index 0)의 배경색을 설정합니다
x[0].style.backgroundColor = "red";

자신의 손으로 직접 시도해 보세요

예제 4

<div> 요소에서 class="example"를 가진 요소의 개수를 찾습니다( NodeList 객체의 length 속성을 사용하여):

/* id="myDIV"의 요소( div)를 가져오고, 그 div 내 모든 class="example"의 p 요소를 가져오고, 찾은 요소의 개수를 반환합니다 */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

자신의 손으로 직접 시도해 보세요

예제 5

<div> 요소에서 class="example"의 모든 요소의 배경색을 설정합니다:

// id="myDIV"의 요소( div)를 가져오고, 그 div 내 모든 class="example" 요소를 가져옵니다
var x = document.getElementById("myDIV").querySelectorAll(".example");
// for 루프를 생성하고 div 내 모든 class="example" 요소의 배경색을 설정합니다
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

자신의 손으로 직접 시도해 보세요

예제 6

<div> 요소에서 모든 <p> 요소의 배경색을 설정합니다:

// id="myDIV"의 요소( div)를 가져오고, 그 div 내 모든 p 요소를 가져옵니다
var x = document.getElementById("myDIV").querySelectorAll("p");
// for 루프를 생성하고 div 내 모든 p 요소의 배경색을 설정합니다
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

자신의 손으로 직접 시도해 보세요

예제 7

<div> 요소에서 target 속성을 가진 모든 <a> 요소의 테두리 스타일을 설정합니다:

// id="myDIV"의 요소( div)를 가져오고, 그 div에서 "target" 속성을 가진 모든 <a> 요소를 가져옵니다
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// for 루프를 생성하고 div 안의 모든 target 속성을 가진 <a> 요소의 경계를 설정
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

자신의 손으로 직접 시도해 보세요

예제 8

<div> 요소 안의 모든 <h2>、<div> 및 <span> 요소의 배경색을 설정합니다：

// id="myDIV"의 요소（div）를 가져오고 <div> 내의 모든 <h2>、<div> 및 <span> 요소를 가져옵니다
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// for 루프를 생성하고 <div> 안의 모든 <h2>、<div> 및 <span> 요소의 배경색을 설정
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

자신의 손으로 직접 시도해 보세요

브라우저 지원

표의 숫자는 이 방법을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

주의：Internet Explorer 8은 CSS2 선택자를 지원합니다. IE9 및 이상 버전은 CSS3도 지원합니다.

관련 페이지

CSS 교육：CSS 선택자

CSS 참조 매뉴얼：CSS 선택자 참조 매뉴얼

JavaScript 교육：JavaScript HTML DOM NodeList

JavaScript 참조 매뉴얼：element.querySelector()

HTML DOM 참조 매뉴얼：document.querySelectorAll()