• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
DOM_Event JS - keypress 이벤트 - [페기예고] 키보드키 눌렀을 때 실행 (= onkeypress속성 = 온…
DOM_Event JS - keyup 이벤트 (= onkeyup 속성) ★ - 키보드키 올리기 이벤트 (= keyup이벤트 =…
DOM_Event JS - load 이벤트 (= onload 속성) - 모든 웹문서 로드 완료 (= load이벤트 = 로드이벤…
DOM_Event JS - loadeddata -
DOM_Event JS - loadedmetadata -
DOM_Event JS - loadstart -
DOM_Event JS - message 이벤트 (= onmessage 속성) - 이벤트 메시지 수신 이벤트 (= onmess…
DOM_Event JS - mousedown 이벤트 (= onmousedown 속성) - 마우스버튼누르기 (= mousedow…
DOM_Event JS - mouseenter 이벤트 (= onmouseenter 속성) ★ - 마우스포인터 요소안 이동 (=…
DOM_Event JS - mouseleave 이벤트 (= onmouseleave 속성) ★ - 마우스포인터 요소밖 이동 (=…
DOM_Event JS - mousemove 이벤트 (= onmousemove 속성) - 마우스이동 (= mousemove이벤…
DOM_Event JS - mouseover 이벤트 (= onmouseover 속성) -
DOM_Event JS - mouseout 이벤트 (= onmouseout 속성) -
DOM_Event JS - mouseup 이벤트 (= onmouseup 속성) - 마우스버튼올리기 (= 마우스업벤트)
DOM_Event JS - mousewheel 이벤트 (= onmousewheel 속성 = 온마우스휠 속성) - 마우스휠 이벤…
DOM_Event JS - offline -
DOM_Event JS - online -
DOM_Event JS - open 이벤트 (= onopen 속성) - 이벤트소스와의 연결 열릴 때 이벤트발생 [서버센트이벤트…
DOM_Event JS - pagehide -
DOM_Event JS - pageshow 이벤트 (= onpageshow 속성) - 사용자가 웹페이지 탐색 시 실행 (= p…
33/67
목록
찾아주셔서 감사합니다. Since 2012