HTML DOM getElementsByClassName() 메서드
❮ 요소 개체예시
class="example"인 목록에서 class="child"(인덱스 0)인 첫 번째 목록 항목의 텍스트를 변경합니다.
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
getElementsByClassName() 메서드는 지정된 클래스 이름을 가진 요소의 자식 요소 컬렉션을 NodeList 객체로 반환합니다.
NodeList 개체는 노드 컬렉션을 나타냅니다. 노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.
팁: NodeList 개체의 length 속성을 사용 하여 지정된 클래스 이름을 가진 자식 노드의 수를 확인한 다음 모든 노드를 반복하고 원하는 정보를 추출할 수 있습니다.
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
통사론
element.getElementsByClassName(classname)
매개변수 값
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
기술적 세부 사항
| DOM 버전: | 핵심 레벨 1 요소 개체 |
|---|---|
| 반환 값: | 지정된 클래스 이름을 가진 요소의 자식 요소 컬렉션을 나타내는 NodeList 개체입니다. 반환된 컬렉션의 요소는 소스 코드에 나타나는 대로 정렬됩니다. |
더 많은 예
예시
<div> 요소 내부에서 class="child"로 두 번째 요소의 배경색을 변경합니다.
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
예시
<div> 요소 내부에 class="child"인 요소가 몇 개인지 알아보세요(NodeList 객체의 length 속성 사용).
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
예시
class="example"인 요소 내에서 "child" 및 "color" 클래스를 모두 사용하여 첫 번째 요소의 배경색을 변경합니다.
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
예시
<div> 요소 내부에서 class="child"인 모든 요소의 배경색을 변경합니다.
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 참조: document.getElementsByClassName()
HTML DOM 참조: className 속성
HTML DOM 참조: classList 속성
HTML DOM 참조: HTML DOM 스타일 개체
❮ 요소 개체