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