[JS-서기] JS 14강 - HTML CSS JS 혼용하기 (=getElementsBy 시리즈 = JS선택자) ★★★★★

예제

 

<style>

 .hz{display:none;}

</style>

<div class='hz' id='sinbi'>

홈짱닷컴 Homzzang.com

</div>

<input type='button' value='클릭' onclick='homzzang()'>

<script>

function homzzang() {

   document.getElementById('sinbi').style.display='block';

   location.href='https://homzzang.com';

}

</script>


결과 보기

주의 - display:none 속성 정의된 hz 클래스로 제어 불가

 

<style>

.hz{display:none;}

</style>

<div class='hz'>

홈짱닷컴 Homzzang.com

</div>

<input type='button' value='클릭' onclick='homzzang()'>

<script>

function homzzang() {

   document.getElementsByClassName('hz').style.display='block';

   location.href='https://homzzang.com';

}

</script>

결과 보기

JS 선택자

 

document.getElementById("아이디");

document.getElementsByTagName("태그이름");

document.getElementsByClassName("클래스");
document.querySelectorAll("선택자");
document.forms["폼아이디"];

 

※ JS 선택자 자세히보기

※ 대소문자 구별 주의

※ 태그 및 클래스는 중간에 복수형 s 들어감에 주의.

※ querySelectorAll() 메서드는 IE8 이하에선 작동 안 함.