HTML DOM 문서 getElementsByClassName()
예시
class="example"인 모든 요소 가져오기:
const collection = document.getElementsByClassName("example");
"example" 및 "color" 클래스가 있는 모든 요소를 가져옵니다.
const collection = document.getElementsByClassName("example color");
아래에 더 많은 예가 있습니다.
정의 및 사용
이 getElementsByClassName()
메서드는 지정된 클래스 이름을 가진 요소 컬렉션을 반환합니다.
이 getElementsByClassName()
메서드는 HTMLCollection 을 반환합니다 .
속성 은 getElementsByClassName()
읽기 전용입니다.
HTML컬렉션
HTMLCollection 은 HTML 노드의 모음입니다 .
컬렉션의 노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.
length 속성 은 컬렉션의 요소 수를 반환합니다.
또한보십시오:
통사론
document.getElementsByClassName(classname)
매개변수
Parameter | Description |
classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
반환 값
유형 | 설명 |
물체. | HTMLCollection 개체입니다 . 지정된 클래스 이름을 가진 요소 컬렉션입니다. 요소는 문서에 나타나는 대로 정렬됩니다. |
더 많은 예
class="example"인 요소 수:
let numb = document.getElementsByClassName("example").length;
class="example"을 사용하여 모든 요소의 배경색을 변경합니다.
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
관련 페이지
CSS 튜토리얼: CSS 구문
CSS 참조: CSS .class 선택기
HTML DOM 참조: 요소 .getElementsByClassName()
HTML DOM 참조: className 속성
HTML DOM 참조: classList 속성
HTML DOM 참조: 스타일 개체
브라우저 지원
document.getElementsByClassName()
DOM 레벨 1(1998) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |