최신 웹 개발 튜토리얼
 

HTML DOM querySelectorAll() Method

<요소 개체

예

클래스 = "예"인 첫 번째 요소의 배경색 기세 내부 <div> 요소 :

// 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"; 
»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

querySelectorAll() 메소드는 지정된 CSS의 일치 요소의 자식 요소의 컬렉션을 반환 selector(s) 정적 NodeList를 객체로를.

노드 목록의 객체는 노드의 컬렉션을 나타냅니다. 노드는 인덱스 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작한다.

팁 : 사용할 수있는 길이 다음 모든 노드를 통해 반복하고 원하는 정보를 추출 할 수 있습니다, 지정된 선택 일치하는 자식 노드의 수를 결정하는 노드 목록 개체의 속성을.

CSS 선택기에 대한 자세한 내용은, 우리의 방문 CSS 선택기 튜토리얼 과 우리의 CSS 선택기 참조 .

브라우저 지원

테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.

방법
querySelectorAll() 4.0 9.0 3.5 3.2 10.0

참고 : 인터넷 익스플로러 8 CSS2 선택기에 대한 지원을하고있다. IE9 이상 버전 CSS3에 대한 지원뿐만 아니라 있습니다.

통사론

element .querySelectorAll( CSS selectors )

매개 변수 값

매개 변수 유형 기술
CSS selectors String 필요합니다. 요소를 일치시킬 하나 이상의 CSS 선택기를 지정합니다. 이들은 등 속성의 자신의 ID, 클래스, 유형, 속성 값을 기반으로 HTML 요소를 선택하는 데 사용됩니다

여러 선택기를 들어, 쉼표로 각 선택기를 구분합니다.

팁 : 모든 CSS 선택기의 목록은 우리를 보면 CSS 선택기 참조 .

기술적 세부 사항

DOM 버전 : 선택기 레벨 1 문서 객체
반환 값 : 특정 CSS 일치 현재 요소의 모든 하위 구성 요소를 나타내는있는 NodeList 객체 selector(s) . 노드 목록은 DOM 변화 컬렉션에 아무런 효과가 없다는 것을 의미 정적 컬렉션이다.

참고 : 지정된 경우 SYNTAX_ERR 예외를 throw selector(s) 유효하지 않습니다
예

더 예

예

모든 위젯 <p> , 안쪽 요소 <div> 요소, 제 1의 배경색으로 설정 <p> 요소 (index 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";  
»그것을 자신을 시도

예

모든 가져 오기 <p> A의 요소 <div> 클래스 = "예"와, 그리고 최초의 배경 설정 <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> (노드 목록 객체의 길이 속성을 사용하여) 요소 :

/* 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; 
»그것을 자신을 시도

예

A의 클래스 = "예"모든 요소의 배경 색상 설정 <div> 요소를 :

// 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";
}
»그것을 자신을 시도

예

모두의 배경 색상 설정 <p> A의 요소 <div> 요소를 :

// 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";
}
»그것을 자신을 시도

예

모두의 테두리 스타일을 설정 <a> A의 요소 <div> 이 요소 "target" 속성 :

// 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";
}
»그것을 자신을 시도

예

배경색이 설정된 모든 <H2>, <div> 및 <span> A의 엘리먼트 <div> 요소 :

// 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";
}
»그것을 자신을 시도

관련 페이지

CSS 자습서 : CSS 선택기

CSS 참조 : CSS 선택기 참조

자바 스크립트 튜토리얼 : 자바 스크립트 HTML DOM 노드 목록

HTML DOM 참조 : 요소입니다. querySelector()

HTML DOM 참조 : 문서. querySelectorAll()

<요소 개체