HTML DOM getElementsByClassName () 메소드
예
첫 번째 항목의 클래스 = "아이"의리스트 클래스 = "예"를 수정 (인덱스 값 0) 텍스트 :
list.getElementsByClassName ( "아이") [0 ] .innerHTML = "우유";
텍스트를하기 전에 수정 :
- 커피
- 차
텍스트를 수정 후 :
- 우유
- 차
»시도
정의 및 사용
getElementsByClassName () 메소드는 NodeList를 개체로, 문서의 모든 요소가 컬렉션의 클래스 이름을 지정 반환합니다.
NodeList의 객체는 노드 목록 순서를 나타냅니다. 우리는 노드 인덱스 번호의 노드리스트를 통해 노드 목록을 (인덱스 번호 0에서 시작)에 액세스 할 수 개체 노드 목록.
팁 : NodeList를 객체의 사용할 수있는 길이 클래스 이름으로 요소의 수를 결정하는 속성을, 그리고주기의 다양한 요소는 당신이 필요로하는 요소를 얻을 수 있습니다.
브라우저 지원
표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.
| 방법 | |||||
|---|---|---|---|---|---|
| getElementsByClassName () | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
문법
매개 변수 값
| 매개 변수 | 유형 | 기술 |
|---|---|---|
| 클래스 명 | 현 | 해야합니다. 요소 클래스 당신은 이름을 얻을 필요가있다. 예 : "테스트 데모"등의 공백으로 구분 된 여러 클래스 이름. |
기술 설명
| DOM 버전 : | 코어 레벨 1 요소 개체 |
|---|---|
| 반환 값 : | 요소를 나타내고있는 NodeList 객체는 컬렉션의 클래스 이름을 지정합니다. 코드의 외관의 순서로 그 종류의 컬렉션에있는 요소의 순서. |
더 많은 예제
예
배경 색상의 두 번째 클래스 = "아이"요소에 <div> 요소를 수정
x.getElementsByClassName ( "아이") [1 ] .style.backgroundColor = "빨강";
»시도
예
참조 <DIV> (length 속성을 NodeList를 사용하여) 클래스 = "아이"요소의 수의 요소입니다 :
X 출력은 다음과 같습니다
»시도
예
"아이"와 "컬러"요소 배경색라는 첫 번째 클래스에서 클래스 = "예"요소를 수정 :
x.getElementsByClassName ( "아이 컬러") [ 0] .style.backgroundColor = "빨강";
»시도
예
배경 색상의 모든 요소의 <div> 요소 클래스 = "아이를"수정 :
var에 y를 = x.getElementsByClassName ( "아이" );
var에 난;
용 (전 = 0; 나는 < y.length을, 내가 ++) {
Y [i]를 .style.backgroundColor = "빨강 ";
}
»시도
관련 기사
CSS 자습서 : CSS 선택기
CSS 참조 : CSS 선택기의 .class
HTML DOM 참조 설명서 : document.getElementsByClassName ()
HTML DOM 참조 : className 속성
HTML DOM 참조 설명서 : HTML DOM 스타일 개체