자바스크립트 요소 접근방법 - getElementsByClassName()

 

자바스크립트에서 html 요소에 접근하는 방법 중 class 를 이용하는 방법이다.

바로 document 객체의 getElementsByClassName() 메소드 이다.

코드를 보자.

<h1>The Document Object</h1>

  <h2>The getElementsByClassName() method</h2>

  <p>Change the text of the first elements with

class ="example"</p>

  <div class="example">Element1</div>

  <div class="example">Element1</div>

  <script>

    const collection = document.getElementsByClassName("example");

    collection[0].innerHTML = "Good Morning!"

  </script>

div 요소 두개의 class 네임이 example 이다.

이 두개의 요소에 접근하여 첫번째 요소의 콘텐츠 값을 변경하려고 한다.

핵심은 바로 document.getElementsByClassName() 메소드의 인자값으로

class 속성의 값을 지정해준다.

document.getElementsByClassName("example");

그럼, 해당 인자값 즉 class 를 가진 HTML 요소를 문서에서 찾아 반환한다.

console.log 로 반환값을 찍어보면, 하기처럼 HTMLCollection이라는 배열 타입을 반환하는 것으로 보인다. 정확히 말하면 HTMLCollection 은 배열과 유사한 모양을 가진 객체이다.

1. HTMLCollection(2) [div.example, div.example]
1. 0: div.example
2. 1: div.example
3. length: 2

반환값을 받은 collection 이란 객체 변수는 

배열처럼 collection[0].innerHTML 첫번째 요소에 접근하여 콘텐츠 값을 수정할 수 있다.

그러므로, 위 코드의 결과는 다음과 같다.

The Document Object

The getElementsByClassName() method

Change the text of the first elements with class ="example"

Good Morning!

Element1