Latest web development tutorials

HTML DOM getElementsByClassName () 메소드

문서 객체 참조 문서 객체

클래스 이름으로 모든 요소를 ​​가져옵니다 :

VAR X = document.getElementsByClassName ( "예" );

»시도

정의 및 사용

getElementsByClassName () 메소드는 NodeList를 개체로, 문서의 모든 요소가 컬렉션의 클래스 이름을 지정 반환합니다.

NodeList의 객체는 노드 목록 순서를 나타냅니다. 우리는 노드 인덱스 번호의 노드리스트를 통해 노드 목록을 (인덱스 번호 0에서 시작)에 액세스 할 수 개체 노드 목록.

팁 : NodeList를 객체의 사용할 수있는 길이 클래스 이름으로 요소의 수를 결정하는 속성을, 그리고주기의 다양한 요소는 당신이 필요로하는 요소를 얻을 수 있습니다.


브라우저 지원

표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.

방법
getElementsByClassName () 4.0 9.0 3.0 3.1 9.5

문법

document.getElementsByClassName (클래스 명)

매개 변수

매개 변수 유형 기술
클래스 명 해야합니다. 요소 클래스 당신은 이름을 얻을 필요가있다.

예 : "테스트 데모"등의 공백으로 구분 된 여러 클래스 이름.

기술 설명

DOM 버전 : 코어 레벨 1 문서 객체
반환 값 : 요소를 나타내고있는 NodeList 객체는 컬렉션의 클래스 이름을 지정합니다. 코드의 외관의 순서로 그 종류의 컬렉션에있는 요소의 순서.

예

더 많은 예제

은 "예"와 "색상"모든 요소의 클래스 이름을 가져옵니다 :

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 속성

HTML DOM 참조 설명서 : HTML DOM이 classList 속성

HTML DOM 참조 설명서 : HTML DOM 스타일 개체


문서 객체 참조 문서 객체