최신 웹 개발 튜토리얼
 

HTML DOM querySelectorAll() Method

<문서 객체

예

클래스 = "예"와 문서의 모든 요소를 ​​가져옵니다 :

var x = document.querySelectorAll(".example");
»그것을 자신을 시도

더 "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에 대한 지원뿐만 아니라 있습니다.

통사론

document.querySelectorAll( CSS selectors )

매개 변수 값

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

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

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

기술적 세부 사항

DOM 버전 : 선택기 레벨 1 문서 객체
반환 값 : 지정된 CSS의 일치하는 문서의 모든 요소를 나타내는있는 NodeList 객체 selector(s) . 노드 목록은 DOM 변화 컬렉션에 아무런 효과가 없다는 것을 의미 정적 컬렉션이다. 경우 SYNTAX_ERR 예외를 throw selector(s) 유효하지 않습니다
예

더 예

예

모든 위젯 <p> 문서의 요소를, 제 1의 배경색으로 설정 <p> 요소 (index 0) :

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red"; 
»그것을 자신을 시도

예

모든 위젯 <p> 클래스 = "예"인 문서의 요소를, 제 1의 배경 설정 <p> 요소 :

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0)
x[0].style.backgroundColor = "red"; 
»그것을 자신을 시도

예

클래스 = "예"와 얼마나 많은 요소를 찾아 (노드 목록 객체의 길이 속성을 사용하여) 문서에있다 :

var x = document.querySelectorAll(".example").length;
»그것을 자신을 시도

예

클래스 = "예"와 문서의 모든 요소의 배경색을 설정합니다 :

var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»그것을 자신을 시도

예

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

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»그것을 자신을 시도

예

모든 경계 설정 <a> 이 문서의 요소 "target" 속성 :

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}
»그것을 자신을 시도

예

모든의 배경 색상 설정 <p> 부모가 어디 요소를 <div> 요소 :

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»그것을 자신을 시도

예

모두의 배경 색상을 설정 <H2>, <div> 와 <span> 문서의 요소 :

var x = document.querySelectorAll("h2, div, span");
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()

<문서 객체