[JavaScript] class 로 태그 선택하기

자바스크립트에서 여러요소의 값을 한번에 선택할 때, 같은 class 를 가진 태그를 선택하는 방법이다.

 

document.getElementsByClassName('class');  (여러요소를 선택하므로 Elements 라고 작성해야한다.)

/* HTML

    <div>
      <button class="color-btn red" data-color="#FF0000"></button>
      <button class="color-btn orange" data-color="#FFA500"></button>
      <button class="color-btn yellow" data-color="#FFFF00"></button>
      <button class="color-btn green" data-color="#008000"></button>
      <button class="color-btn blue" data-color="#0000FF"></button>
      <button class="color-btn indigo" data-color="#4B0082"></button>
      <button class="color-btn purple" data-color="#800080"></button>
      <button class="color-btn black" data-color="#000000"></button>
    </div>
    
*/

const myTags1 = document.getElementsByClassName('color-btn');
console.log(myTags1);
console.log(myTags1[1]); // 특정 인덱스 번호에 접근
console.log(myTags1.length); // length property 사용 가능

for (let tag of myTags1) {
	console.log(tag);
}

배열이 아니기 때문에 배열의 메소드는 사용할 수 없으나,  특정 인덱스 번호에 접근하거나, length 프로퍼티 사용이 가능하다.

깊이와 상관없이 위에서부터 차례대로 나타난다.

 

const myTags3 = document.getElementsByClassName('white');
console.log(myTags3); // HTMLCollection []
console.log(myTags3 === null); // false
console.log(myTags3.length); // 0

또한 없는 값을 선택하면 빈 html 컬렉션이 추가되며, length property 는 0 이다.