지정 클래스 이름을 가진 모든 요소들을 가져옵니다.
<!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>
getElementsByClassName() 메서드는 지정된 클래스 이름을 가진 문서의 모든 요소 컬렉션을 HTMLCollection 오브젝트로 반환합니다.
HTMLCollection 오브젝트는 노드 컬렉션a collection of nodes을 나타냅니다.
노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.
Tip:
HTMLCollection 개체의 길이 속성을 사용하여 지정된 클래스 이름을 가진 요소의 수를 확인한 다음
모든 요소를 반복하고 원하는 정보를 추출할 수 있습니다.
document.getElementsByClassName(classname)
| Parameter | Type | Description |
| classname | String | 필수이며, 가져오려는 요소들의 클래스 이름입니다. |
|---|---|---|
| 여러 개의 클래스 이름을 검색하려면, “test demo”처럼 공백으로 구분합니다. |
반환 값:
반환하는 값은 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>