English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML DOM getElementsByClassName() 메서드

HTML DOM Document 객체

getElementsByClassName()메서드는 특정 class 속성 값을 가진 요소를 얻을 수 있으며, 반환 값은 집합입니다.

반환된 목록의 요소는 원본 코드에서 등장한 순서로 정렬됩니다.

반환된 목록에 인덱스 번호로 접근할 수 있습니다. 인덱스는 0에서 시작됩니다.

배열을 사용하여length특정 클래스 이름을 가진 요소의 수를 결정한 후, 모든 요소를 순회하며 필요한 정보를 추출할 수 있습니다.

문법:

document.getElementsByClassName(class)
var x = document.getElementsByClassName("demo");
테스트를 보세요‹/›

브라우저 호환성

모든 브라우저가 getElementsByClassName() 메서드를 완전히 지원합니다:

메서드
getElementsByClassName()

파라미터 값

파라미터설명
class가져올 요소의 클래스 이름을 나타내는 문자열.
여러 클래스 이름을 검색하려면 공백으로 구분하여 입력하십시오. 예를 들어, 'demo color'.

기술 세부 사항

반환 값: 모든 주어진 클래스 이름을 가진 모든 자식 요소의 유사 배열 객체를 반환합니다.
DOM 버전:DOM 레벨1

更多实例

"demo"와 "color" 클래스를 사용하여 모든 요소를 가져옵니다:

var x = document.getElementsByClassName("demo color");
테스트를 보세요‹/›

class="demo"를 사용하여 모든 요소의 배경색을 변경합니다:

var x = document.getElementsByClassName("demo");
for(let i = 0; i < x.length;++) {
   x[i].style.backgroundColor = "coral";
}
테스트를 보세요‹/›

관련 참조

DOM Document querySelector()메서드

DOM Document querySelectorAll()메서드

DOM Document getElementById()메서드

DOM Document getElementsByTagName()메서드

HTML DOM Document 객체