[DOM_Document] JS - getElementsByClassName() 메서드 ★★ - 클래스선택자 (= 클래스명선택자 = 클래스이름선택자)

document.getElementsByClassName() 예제

 

<h1 class="hz">홈짱닷컴</h1>

<h3 class="hz">홈페이지 제작관리</h3>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.getElementsByClassName("hz");

  x[0].innerHTML = "Homzzang.com";

}

</script>

 

결과보기

document.getElementsByClassName() 예제

 

<ul>

  <li class="hz">HTML</li>

  <li class="hz">CSS</li>

  <li class="hz">PHP</li>

  <li class="hz">SQL</li>

</ul>

 

<style>

var hz = document.getElementsByClassName('hz');

// console.dir(hz);

// hz[0].style.color = "red";

for(let i=0; i< hz.length; i++) {

  hz[i].style.color="red";

}

</style>

 

결과보기