Dev. Language/Javascript
DOM HTML API
lucyk4t
2009. 7. 21. 12:30
+ HTML 객체와 HTML 객체 프로퍼티
대부분의 HTML 인터페이스 객체는 Element 와 Node 객체의 프로퍼티와 메소드를 상속받는다.
그리고 HTMLElement 또한 대부분 상속받는다.
HTMLElement에는 id, title, lang, dir, className과 같은 프로퍼티들이 있다.
각 인터페이스 객체 이름은 HTML 폼 엘리먼트 이름을 본따서 만든다.
그렇지만 꼭 태그명을 본따서 만들 필요는 없다.
예를 들어, HTMLFormElement는 HTML 폼 엘리먼트의 인터페이스 객체이고,
HTMLParagraphElement는 문단 태그(P)에 대한 객체이다.
이러한 객체들을 통해 엘리먼트의 모든 유효한 속성에 접근할 수 있다.
예를 들어 HTMLDivElement를 통해서 align에,
HTMLImageElement를 통해 src에 접근할 수 있다.
[예제] 문서의 image 컬렉션을 사용해 하나의 이미지에 접근하며, 그 속성을 잘라내 문자열로 저장하고
alert를 사용하여 대화상자에 내용을 출력한다. 그리고 대화상자를 닫으면 이미지 속성이 변경된다.
<script type="text/javascript" language="javascript">
//<![[CDATA[
function procImage(){
var img = document.images[0];
// 현재의 속성을 가져온다.
var imgAttr = img.align+" "+img.alt+" "+img.src+" "+img.width+" "+img.height;
alert(imgAttr);
// 이미지 속성을 변경한다.
img.src="upright.gif";
img.width="100";
img.height="100";
img.alt="Alternative";
img.align="left";
img.title="Upright";
document.close(); /.. 문서 처리가 끝났음을 알린다.
}
//]]>
</script>
<body onload="javascript:procImage();">
<img src="dotty.gif" alt="Dotty" />
</body>