코딩동강

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

1,879

 

예제

 

<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 이하에선 작동 안 함.



분류 제목
PHP-생코 PHP 90강 - 앱에플리케이션 설치하기 - 텍스트큐브편 2 (설치/설정)
PHP-생코 PHP 89강 - 앱에플리케이션 설치하기 - 텍스트큐브편 1 (다운/업로드)
PHP-생코 PHP 88강 - 웹에플리케이션 만들기 - PHP 실습 1 (SSH로 압축파일 올려 압축풀기)
PHP-생코 PHP 87강 - php.net 문서보는법
PHP-생코 PHP 86강 - 디버깅 - xdebug 3 (사용법)
PHP-생코 PHP 85강 - 디버깅 - xdebug 2 (설치)
PHP-생코 PHP 84강 - 디버깅 - xdebug 1 (소개)
PHP-생코 PHP 83강 - 디버깅 log2 (access_log , error_log) ★★
PHP-생코 PHP 82강 - 디버깅 log (= var_dump 사용법) ★
PHP-생코 PHP 81강 - 디버깅 (에러 찾아 해결하기)
PHP-생코 PHP 80강 - 세션2 (로그인 로그아웃) ★★★★★★★★★★
PHP-생코 PHP 79강 - 세션1 ★★★★★
PHP-생코 PHP 78강 - 쿠키 ★★★★★
PHP-생코 PHP 77강 - PHP와 MySQL의 연동 - 디버깅 (= 에러 찾기)
PHP-생코 PHP 76강 - PHP와 MySQL의 연동 - 데이터를 삭제하기 ★★★★★
23/47
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인