getElementById Method |
지정된 ID 를 가진 element return
지정한 id 속성값을 가지는 개체중 첫 번째 개체를 참조하는 매서드이다.
explorer에서는 id만으로 개체를 인식할 수 있는데 netscape6.x에서는 이렇게 하면 개체를
인식하지 못하는데 getElementById는 explorer와 netscape6.x에서 공통적으로 개체를
인식하는데 적용되는 것으로 개체를 인식하는데 좀 번거롭기는 하지만 어쩌면 제일 중요하다고 할 수 있다.
getElementById(id) 생성 형식
document.getElementById(string) string : id 속성값을 지정하는 string
|
getElementById(id) 예제 1
- <HTML>
- <HEAD>
- <META http-equiv="content-type" content="text/html; charset=euc-kr">
- <TITLE>C.n.J Script 테스트</TITLE>
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- var main="http://www.CginJs.Com";
- function n_s(isCheck) {
- tar = isCheck ? "_blank" : "_self";
- for (var i = 0; i <= (document.links.length - 1); i++) {
- if (document.links[i].href.indexOf(main) < 0 )
- document.links[i].target = tar;
- if(document.links[i].target == "_self")
- document.getElementById('cnj').innerHTML = "현재 창에서 링크 열기";
- else
- document.getElementById('cnj').innerHTML = "새창에서 링크 열기";
- }
- }
- //-->
- </SCRIPT>
- </HEAD>
- <BODY>
- <input type="checkbox" name="cnj_check" onClick="n_s(this.checked)"> <span id="cnj">현재 창에서 링크 열기</span><br><br>
- <a href="http://www.CginJs.Com">CGI 와 JavaScript가 만났을 때 = C.n.J</a>
- </BODY>
- </HTML>
|
getElementById(id) 예제 2
- <HTML>
- <HEAD>
- <META http-equiv="content-type" content="text/html; charset=euc-kr">
- <TITLE>C.n.J Script 테스트</TITLE>
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- function cnj_test(num) {
- bg_color="#D0F050";
- if(document.all) {
- eval("document.all.cnjbg_"+num+".style.backgroundColor=bg_color");
- }
- if(document.getElementById) {
- document.getElementById("cnjbg_"+num).style.backgroundColor=bg_color;
- }
- }
- //-->
- </SCRIPT>
- </HEAD>
- <BODY>
-
- <center>표의 번호를 클릭해보세요...</center><br>
-
- <table border="0" cellpadding="5" cellspacing="1" bgcolor="#cccccc" align="center" style="cursor:hand">
- <tr bgcolor="#f2f2f2" align="center">
- <td width="15" onclick="cnj_test(1)">1</td>
- <td width="15" onclick="cnj_test(2)">2</td>
- <td width="15" onclick="cnj_test(3)">3</td>
- <td width="15" onclick="cnj_test(4)">4</td>
- <td width="15" onclick="cnj_test(5)">5</td>
- <td width="15" onclick="cnj_test(6)">6</td>
- <td width="15" onclick="cnj_test(7)">7</td>
- <td width="15" onclick="cnj_test(8)">8</td>
- <td width="15" onclick="cnj_test(9)">9</td>
- <td width="15" onclick="cnj_test(10)">10</td>
- </tr>
- <tr bgcolor="#ffffff" align="center">
- <td width="15" id="cnjbg_1">C</td>
- <td width="15" id="cnjbg_2">g</td>
- <td width="15" id="cnjbg_3">i</td>
- <td width="15" id="cnjbg_4">n</td>
- <td width="15" id="cnjbg_5">J</td>
- <td width="15" id="cnjbg_6">s</td>
- <td width="15" id="cnjbg_7">.</td>
- <td width="15" id="cnjbg_8">C</td>
- <td width="15" id="cnjbg_9">o</td>
- <td width="15" id="cnjbg_10">m</td>
- </tr>
- </table>
- </BODY>
- </HTML>
|
출처 :http://www.cginjs.com