HTML DOM Document getElementsByClassName() 메서드

정의와 사용법

getElementsByClassName() 지정된 클래스 이름을 가진 요소 집합을 반환합니다。

getElementsByClassName() 메서드는 HTMLCollection메서드는

getElementsByClassName() 속성은 읽기 전용입니다。

HTMLCollection

HTMLCollection HTML 요소와 유사한 배열형 집합(리스트)

인덱스를 통해 집합의 요소에 접근할 수 있습니다. (0부터 시작)

length 속성은 집합에 포함된 요소의 개수를 반환합니다。

추가로 참고하십시오：

getElementById() 메서드

getElementsByTagName() 메서드

querySelector() 메서드

querySelectorAll() 메서드

HTMLCollection 객체

예제

예제 1

class="example"를 가진 모든 요소를 가져옵니다：

const collection = document.getElementsByClassName("example");

직접 테스트해 보세요

예제 2

동시에 "example"과 "color" 클래스를 가진 모든 요소를 가져옵니다：

const collection = document.getElementsByClassName("example color");

직접 테스트해 보세요

예제 3

class="example"의 요소 수:

let numb = document.getElementsByClassName("example").length;

직접 테스트해 보세요

예제 4

class="example"의 모든 요소의 배경색을 변경합니다:

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

직접 테스트해 보세요

문법

document.getElementsByClassName("example")classname)

매개변수

매개변수 설명
classname

필수. 요소의 클래스 이름.

빈 공백으로 구분된 여러 클래스 이름을 검색할 수 있습니다. 예를 들어, "test demo".

반환 값

형식 설명
객체

HTMLCollection 객체.

지정된 클래스 이름을 가진 요소 집합.

문서에서 나타나는 순서대로 요소를 정렬합니다.

브라우저 지원

document.getElementsByClassName() DOM Level 1 (1998) 기능입니다.

모든 브라우저에서 지원됩니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원

관련 페이지

CSS 강의:CSS 문법

CSS 참조 가이드:CSS .class 선택자

HTML DOM 참조 가이드:element.getElementsByClassName()

HTML DOM 참조 가이드:className 속성

HTML DOM 참조 가이드:classList 속성

HTML DOM 참조 가이드:Style 객체