더 "Try it Yourself" 아래의 예.
정의 및 사용
getElementsByClassName() 메소드는 NodeList를 대상으로, 지정된 클래스 이름으로 문서에있는 모든 요소의 컬렉션을 반환합니다.
노드 목록의 객체는 노드의 컬렉션을 나타냅니다. 노드는 인덱스 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작한다.
팁 : 사용할 수있는 길이 당신이 모든 요소를 통해 반복하고 원하는 정보를 추출 할 수 있습니다, 지정된 클래스 이름을 가진 요소의 수를 결정하기 위해 노드 목록 개체의 속성을.
브라우저 지원
테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.
| 방법 | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
통사론
document.getElementsByClassName( classname )매개 변수 값
| 매개 변수 | 유형 | 기술 |
|---|---|---|
| classname | String | 필요합니다. 당신이 얻을 할 요소의 클래스 이름입니다. 여러 클래스 이름을 검색처럼 공백으로 구분하려면 "test demo" . |
기술적 세부 사항
| DOM 버전 : | 코어 레벨 1 문서 객체 |
|---|---|
| 반환 값 : | 지정된 클래스 이름을 가진 요소의 컬렉션을 나타내는있는 NodeList 객체. 그들은 소스 코드에 나타나는 반환 된 컬렉션의 요소는 분류되어 있습니다. |
더 예
예
둘 다 모든 요소 가져 오기 "example" 와 "color" 클래스 :
var x =
document.getElementsByClassName("example color"); »그것을 자신을 시도 예
클래스 = "예"와 얼마나 많은 요소를 찾아 (노드 목록 객체의 길이 속성을 사용하여) 문서에있다 :
var x =
document.getElementsByClassName("example").length; »그것을 자신을 시도 예
클래스 = "예"모든 요소의 배경색을 변경 :
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 선택기
CSS 참조 : CSS의 .class 선택기
HTML DOM 참조 : 요소입니다. getElementsByClassName()
HTML DOM 참조 : className Property
HTML DOM 참조 : classList Property
HTML DOM 참조 : 스타일 개체