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

HTML DOM getElementsByClassName() 메서드

HTML DOM Element 객체

element.getElementsByClassName()반환된 목록은 모든 지정된 클래스 이름을 가진 자식 요소를 포함하는 클래스 배열 객체를 반환합니다. document 객체에서 호출될 때는 전체 DOM 문서를 검색하며, 루트 노드를 포함합니다. 또한, getElementsByClassName() 메서드를 어떤 요소에서 호출하든, 현재 요소를 루트로 하는 모든 지정된 클래스 이름을 가진 자식 요소를 반환합니다.

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

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

사용length속성은 지정된 클래스 이름을 가진 자식 요소의 개수를 결정하고, 모든 요소를 순회하면 필요한 정보를 추출할 수 있습니다.

document.getElementsByClassName()메서드의 작동 원리는 기본적으로 동일하지만, 전체 문서에 대해 작용하며 문서 루트에서 시작합니다.

문법:

element.getElementsByClassName(class)
var gBox = document.getElementById("greenBox");
gBox.getElementsByClassName("demo")[0].innerHTML = "Hello World";
테스트를 보고 보세요‹/›

브라우저 호환성

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

메서드
getElementsByClassName()

파라미터 값

파라미터설명
class원하는 자식 요소의 클래스 이름.
여러 클래스 이름을 검색하려면 공백으로 구분하십시오. 예를 들어, 'demo color'.

기술 세부 사항

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

관련 참조

CSS 가이드CSS 문법

CSS 참조CSS .class선택자

HTML DOM 참조className 속성

HTML DOM 참조classList 속성

HTML DOM 참조document.getElementsByClassName()메서드

HTML DOM 참조element.getElementsByTagName()메서드

HTML DOM Element 객체