이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

Element의 메소드 getElementsByClassName() 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환합니다.

DocumentgetElementsByClassName() 메소드는 도큐먼트 루트로부터 도큐먼트 전체를 탐색한다는 점을 제외하고는 동일하게 작동합니다. 

Syntax

var elements = element.getElementsByClassName(names);

Parameters

names
검색할 클래스 혹은 클래스들을 띄어쓰기로 구분한 DOMString

Return value

실시간으로 업데이트되는 해당 클래스명을 가진 요소 목록의 HTMLCollection 이 반환됩니다.

Usage notes

항상 그렇듯, 반환되는 collection은 실시간입니다. 즉, 함수가 호출된 이후에도 DOM 트리의 현재 상태가 반영됩니다. names 에 해당하는 클래스를 가진 요소가 하위에 추가되면, 그 요소는 즉시 collection에 나타납니다. 비슷하게, names 에 매칭되는 클래스를 갖고 있지 않은 요소에 매칭되는 클래스명이 적용되면, 그 요소 역시 즉시 collection에 나타나게 됩니다.

반대도 역시 마찬가지입니다. 클래스명이 더 이상 names 와 일치하지 않게 되면, collection으로 부터 즉시 제거됩니다.

호환모드에서는 클래스명의 대소문자를 구분하지 않습니다. 그 외의 경우에는, 대소문자를 구분합니다.

Examples

단일 클래스 찾기

요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서는, 그 클래스명을 getElementsByClassName()의 인자로 넣으세요:

element.getElementsByClassName('test');

아래의 예시는 main 이라는 id 를 가진 요소의 하위 요소들 중 test라는 클래스를 가진 모든 요소를 탐색합니다. 

document.getElementById('main').getElementsByClassName('test');

여러개의 클래스로 탐색하기

red 와 test 라는 클래스를 모두 포함하고 있는 요소를 탐색하기 위해서는 다음과 같이 합니다:

element.getElementsByClassName('red test');

결과값 검토하기

collection의 개별 요소를 가져오기 위해 HTMLCollection 의item() 메소드를 이용하거나 표준 배열 문법을 사용할 수 있습니다. 아래는 잘못된 코드의 예시입니다. "matches" 는 "colorbox" 클래스가 삭제됨에 따라 바로 변경될것이기 때문에  아래의 코드는 작동하지 않습니다.

var matches = element.getElementsByClassName('colorbox');

for (var i=0; i<matches.length; i++) {
  matches[i].classList.remove('colorbox');
  matches.item(i).classList.add('hueframe');
}

대신 다른 방법을 사용하세요. 예시:

var matches = element.getElementsByClassName('colorbox');

while (matches.length > 0) {
  matches.item(0).classList.add('hueframe');
  matches[0].classList.remove('colorbox');
}

위 코드는  "colorbox" 클래스를 가진 모든 자식 요소를 찾고, item(0) 을 호출해 "hueframe"이라는 클래스를 추가합니다 . 그리고 "colorbox"  클래스를 제거합니다(배열 표기법을 사용하여). 다른 요소 (만약 남아있다면) 가 item(0) 이 될 것입니다.

배열 함수를 이용해 결과값을 필터링하기

HTMLCollection을 this 로 사용하면 Array.prototype 을 어떤 HTMLCollection에서든 사용할 수 있습니다. 아래의 예제에서는 test 클래스를 가진 모든 <div> 요소를 찾아봅니다 :

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
  return testElement.nodeName === 'DIV';
});

Specifications

Specification Status Comment
DOM
The definition of 'Element.getElementsByClassName()' in that specification.
Living Standard Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge ? Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Prior to Firefox 19, this method was returning a NodeList; it was then changed to reflect the change in the spec.
IE Full support 9Opera Full support YesSafari Full support Yes
Notes
Full support Yes
Notes
Notes Safari on iOS 8 and OS X 10.10 returns a NodeList.
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

문서 태그 및 공헌자

이 페이지의 공헌자: whdckszxxx
최종 변경자: whdckszxxx,