목차

HTML DOM getElementsByClassName() Method

  • description : HTML DOM getElementsByClassName() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-07


Source of the article


지정 클래스 이름을 가진 모든 요소들을 가져옵니다.

예제

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="example">First div element with class="example".</div>
    <div class="example">Second div element with class="example".</div>
    <p>Click the button to change the text of the first div element with class="example" (index 0).</p>
    <button onclick="myFunction()">Try it!</button>
    <p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and eralier versions.</p>
    <script>
        function myFunction() {
            var x = document.getElementsByClassName("example");
            x[0].innerHTML = "Hello World!";
        }
    </script>
</body>
</html>

Definition and Usage

getElementsByClassName() 메서드는 지정된 클래스 이름을 가진 문서의 모든 요소 컬렉션을 HTMLCollection 오브젝트로 반환합니다.

HTMLCollection 오브젝트는 노드 컬렉션a collection of nodes을 나타냅니다.
노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.

Tip:
HTMLCollection 개체의 길이 속성을 사용하여 지정된 클래스 이름을 가진 요소의 수를 확인한 다음
모든 요소를 반복하고 원하는 정보를 추출할 수 있습니다.

Syntax

document.getElementsByClassName(classname)

Parameter Values

Parameter Type Description
classname String 필수이며, 가져오려는 요소들의 클래스 이름입니다.
여러 개의 클래스 이름을 검색하려면, “test demo”처럼 공백으로 구분합니다.

Technical Details

반환 값:
반환하는 값은 HTMLCollection 오브젝트이며, 지정된 클래스 이름을 가진 요소 컬렉션을 나타냅니다.
반환된 컬렉션의 요소들은 소스 코드에서 보여지는 대로 정렬됩니다.

예제

“example” 클래스와 “color” 클래스를 모두 가진 요소들을 모두 가져옵니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid #000;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="example">
        <p>P element in first div with class="example". Div's index is 0.</p>
    </div>
    <div class="example color">
        <p>P element in first div wikth class="example color". Div's index is 0.</p>
    </div>
    <div class="exmple color">
        <p>P element in second div with class="example color". Div's index is 1.</p>
    </div>
    <p>Click the button to change the background color of the first div element with the classes "exmaple" and "color".</p>
    <button onclick="myFunction()">Try it</button>
    <p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier version.</p>
    <script>
        function myFunction() {
            var x = document.getElementsByClassName("example color");
            x[0].style.backgroundColor = "red";
        }
    </script>
</body>
</html>

예제

HTMLCollection 오브젝트의 length 속성을 사용하여, 문서에 class="example"이 있는 요소가 몇 개 있는지 확인합니다.

<!DOCTYPE html>
<html>
<body>
    <div class="example">
        A div element with class="example"
    </div>
    <div class="example">
        Another div element with class="example"
    </div>
    <p class="example">A p element with class="example"</p>
    <p>Click the button to find out how many elements with class "exmple" there are in this document.</p>
    <button onclick="myFunction()">Try it!</button>
    <p><strong>Note:</strong>The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
    <p id="demo"></p>
    <script>
        function myFunction() {
            var x = document.getElementsByClassName("example");
            document.getElementById("demo").innerHTML = x.length;
        }
    </script>
</body>
</html>

예제

class="example"을 가진 모든 요소들의 배경색을 변경합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        .example {
            border: 1px solid #000;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="example">
        A div with class="example"
    </div>
    <div class="example">
        Another div with class="example"
    </div>
    <p class="example">This is a p element with class="example".</p>
    <p>This is a <span class="example">span</span> element with class="example" inside another p element.</p>
    <p>Click the button to change the background color of all elements with class="example"</p>
    <button class="example" onclick="myFunction()">Try it!</button>
    <p><strong>Note:</strong>The getElementsByClassName() method is not supported in Internet Explorer 8 and eralier versions.</p>
    <script>
        function myFunction() {
            var x = document.getElementsByClassName("example");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.backgroundColor = "red";
            }
        }
    </script>
</body>
</html>