HTML DOM Element getElementsByClassName() 메서드

정의와 사용법

getElementsByClassName() 메서드는 지정된 클래스 이름을 가진 자식 요소의 집합을 NodeList 객체로 반환합니다.

다른 참고 사항:

classList 속성

className 속성

querySelector() 메서드

querySelectorAll() 메서드

getElementsByTagName() 메서드

HTML DOM Style 객체

教程：

CSS 문법

CSS 선택자

CSS 선택자 참조 매뉴얼

NodeList

NodeList 숫자와 유사한 노드 집합(리스트)입니다.

리스트의 노드에 인덱스(인덱스)로 접근할 수 있습니다. 인덱스는 0에서 시작합니다。

length 속성리스트에서의 노드 수를 반환합니다。

인스턴스

예제 1

class="child"를 사용하여 첫 번째 목록 항목의 텍스트를 변경하십시오：

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

직접 시도해보세요

예제 2

"myDIV"에서 class="child" 요소의 수：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

직접 시도해보세요

예제 3

class="child"의 두 번째 요소의 크기를 변경하십시오：

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

직접 시도해보세요

예제 4

class="example"의 두 번째 요소에서 "child"과 "color" 클래스를 사용하여 첫 번째 요소의 크기를 변경합니다:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

직접 시도해보세요

예제 5

class="child"의 "myDIV"에 있는 모든 요소의 색상을 변경합니다:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

직접 시도해보세요

문법

element.getElementsByClassName(classname)

파라미터

파라미터 설명
classname

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

여러 이름을 공백으로 구분하여 사용합니다. (예: "child color")

반환 값

타입 설명
NodeList

지정된 클래스 이름을 가진 요소의 자식 요소를 포함합니다.

요소는 원본 코드에서 등장하는 순서로 정렬됩니다.

브라우저 지원

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

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

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