getElementById() 함수는
DOM(Document Object Model)에 정의되어 있습니다.
아래의 문서를 참조하세요...
mozilla DOM 문서
http://www.mozilla.org/docs/dom/domref/ ... tml#997518
W3C DOM 문서
http://www.w3.org/DOM/DOMTR#dom2
문서에 포함된 엘레멘트 객체를 구하는 함수로는 크게 2가지가 있습니다.
getElementById() 함수는 엘레멘트에 ID 속성이 설정되어 있을 경우에
해당 엘레멘트의 객체를 ID로 접근할 경우에 사용됩니다.
엘레멘트의 객체를 구하는 방법 중에서 제일 많이 사용되는 방법입니다.
이 함수는 document 객체에서만 사용할 수 있습니다.
getElementsByTagName() 함수는 HTML 태그명으로 객체를 구할 때
사용됩니다. 이 함수의 리턴 값은 같은 이름의 태그가 문서에 하나 이상
존재할 수 있으므로 객체 배열형태가 됩니다.
이 함수는 document 객체뿐만 아니라
엘레멘트 객체에서도 사용할 수 있습니다.
예를 들어서...
Code: Select all
<html>
<body>
<div id="div1">
<span id="div1span1"> 스팬1 </span>
<span id="div1span2"> 스팬2 </span>
<span id="div1span3"> 스팬3 </span>
</div>
<div id="div2">
<span id="div2span1"> 스팬1 </span>
<span id="div2span2"> 스팬2 </span>
<span id="div2span3"> 스팬3 </span>
</div>
</body>
</html>
위와 같은 HTML 소스가 있을 때
id값이 div1인 div 영역을 보이지 않게 하려면...
ele = document.getElementById("div1");
ele.style.visibility = "hidden";
id값이 div1인 div 영역을 보이게 하려면...
ele = document.getElementById("div1");
ele.style.visibility = "visible";
또 다른 예로는
위와 같은 HTML 문서에서 div2 영역의 span3의 객체를 구하는 방법으로는
d2s3 = document.getElementById("div2span3");
d2s3.style.visibility = "visible";
또는 SPAN 태그 이름으로도 구할 수 있습니다.
예를 들면...
ele = document.getElementById("div2");
elelists = ele.getElementsByTagName("span"); // ele 객체의 하위에서만 수집
d2s3 = elelists[2];
d2s3.style.visibility = "visible";