[JavaScript] 자바스크립트 클래스명으로 요소 읽어 오기

132_자바스크립트 클래스명으로 요소 읽어 오기

[적용]

• 클래스명과 일치하는 요소를 모두 가져오고 싶을 때 

---

[문법]

메소드	의미	반환
document.getElementsByClassName(클래스명)	클래스명 일치 요소 모두 가져오기	요소의 배열(HTMLCollection)

---

[내용]

document.getElementsByClassName()은 클래스명과 일치하는 HTML 요소를 모두 가져오며,

querySelector()와 달리 인수는 클래스명만 전달할 수 있다.

 

HTML                                                                                                                                                              index.html

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

JavaScript                                                                                                                                                          main.js

// foo 요소
document.getElementsByClassName('box');

 

각 요소의 처리는 for문을 사용하며, forEach()는 사용할 수 없다.

const boxList = document.getElementsByClassName('box');
const boxLength = boxList.length;

for (let index = 0, index < boxLength; index++) {
  // 각 box 요소 출력
  console.log(boxList[index]);
}

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김