HTML DOM querySelectorAll() 메서드

예시

<div> 요소 내부에 class="example"을 사용하여 첫 번째 요소의 배경색을 설정합니다.

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

querySelectorAll() 메서드는 지정된 CSS 선택기와 일치하는 요소의 자식 요소 컬렉션을 정적 NodeList 개체로 반환합니다.

NodeList 개체는 노드 컬렉션을 나타냅니다. 노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.

팁: NodeList 객체의 length 속성을 사용 하여 지정된 선택기와 일치하는 자식 노드의 수를 확인한 다음 모든 노드를 반복하고 원하는 정보를 추출할 수 있습니다.

CSS 선택기에 대한 자세한 내용은 CSS 선택기 자습서 및 CSS 선택기 참조 를 참조 하십시오.

브라우저 지원

표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

참고: Internet Explorer 8은 CSS2 선택기를 지원합니다. IE9 이상 버전은 CSS3도 지원합니다.

통사론

element.querySelectorAll(CSS selectors)

매개변수 값

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

기술적 세부 사항

DOM 버전:	선택기 수준 1 문서 개체
반환 값:	지정된 CSS 선택기와 일치하는 현재 요소의 모든 하위 요소를 나타내는 NodeList 개체입니다. NodeList는 정적 컬렉션입니다. 즉, DOM의 변경 사항이 컬렉션에 영향을 미치지 않습니다. 참고: 지정된 선택기가 유효하지 않은 경우 SYNTAX_ERR 예외가 발생합니다.

더 많은 예

예시

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

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

예시

class="example"인 <div>의 모든 <p> 요소를 가져오고 첫 번째 <p> 요소의 배경을 설정합니다.

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

예시

<div> 요소에 class="example"인 요소가 몇 개인지 확인합니다(NodeList 개체의 length 속성 사용).

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

예시

<div> 요소에서 class="example"을 사용하여 모든 요소의 배경색을 설정합니다.

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

예시

<div> 요소에 있는 모든 <p> 요소의 배경색을 설정합니다.

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

예시

"target" 속성이 있는 <div> 요소의 모든 <a> 요소의 테두리 스타일을 설정합니다.

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

예시

<div> 요소에 있는 모든 <h2>, <div> 및 <span> 요소의 배경색을 설정합니다.

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References