Document Object
이 번 페이지에서는 Document 객체가 가지고 있는 Property(하위 객체)들에 대해서 알아 보도록 하겠습니다. Document 객체의 Property들은 주로 문서(Document)내의 Link, Anchor, Image, Title 등 문서에 사용된 Tag에 대한 문서 내부적인 정보와 문서의 domain, Url 등 외부적인 정보와 정보 들을 알아 보는데 사용되며 아래의 그림에서 보는 바와 같이 document 객체에는 여러 개의 하위 객체들이 있으며, Layer와 Plugin은 Netscape에서만 적용됩니다.
*** Property와 Method 이름은 대소문자를 학씨리 구분(Case-sensitive)합니다.
| Document Object Properties |
| anchors |
문서에 포함된 anchor element collection return |
| applets |
applet 에 포함된 모든 element collection return |
| body |
body 또는 frameset return |
| cookie |
문서의 쿠키 값 return |
| domain |
문서의 도메인 이름 return |
| forms |
문서의 form collection에 포함된 모든 element return |
| images |
문서에 포함된 모든 image element collection return |
| links |
문서내의 href attribute로 지정된 모든 anchor collection return |
| referrer |
현재 문서의 링크가 있는 문서의 URL 값 return |
| title |
문서의 title return 또는 지정 |
| URL |
문서의 URL 값 return |
Document Object의 Property 예제 <html>
<head>
<title>Document Object의 Property</title>
<style type="text/css">
<!--
img {border:1px solid royalblue;}
-->
</style>
</head>
<body style="background-color:buttonface;">
<fieldset style="padding:10px;">
<legend>Document Object의 Property</legend>
<a name="first">first</a><br />
<a name="second">second</a><br />
<a name="third">third</a><br />
<form name="frm1"><input value="form1" /></form><br />
<form name="frm2"><input value="form2" /></form>
<img src="../../images/icon/ico_doc.gif" alt="ico_doc (1K)" /><br /><br />
<img src="../../images/icon/ico_doc_new.gif" alt="ico_doc_new (1K)" /><br /><br />
<img src="../../images/icon/ico_explanation.gif" alt="ico_explanation (1K)" /><br /><br />
<a href="#first">link 1</a><br />
<a href="#second" id="link2">link 2</a><br />
<a href="#third">link 3</a><br />
</fieldset><br /><br />
<script type="text/javascript">
<!--
document.write("문서의 배경색 : " + document.body.style.backgroundColor + "<br />")
document.write("문서의 제목 : " + document.title + "<br />")
document.write("문서에 포함된 anchor의 갯수 : " + document.anchors.length + "개<br />")
document.write("문서에 포함된 첫번째 anchor이름 : " + document.anchors[0].name + "<br/>")
document.write("문서에 포함된 link의 갯수 : " + document.links.length + "개<br />")
document.write("문서에 포함된 두번째 link의 id : " + document.links[1].id + "<br />")
document.write("문서에 포함된 image의 갯수 : " + document.images.length + "개<br />")
document.write("문서의 URL : " + document.URL + "<br />")
document.write("문서에 포함된 form의 갯수 : " + document.forms.length + "개<br />")
document.write("문서의 첫 번째 form의 name 값 : " + document.forms[0].name + "<br />")
document.write("문서의 두 번째 form의 name 값 : " + document.forms[1].name + "<br />")
document.write("이 문서의 Link가 있는 file의 URL : " + document.referrer + "<br />")
document.write("문서의 cookie 값 : " + document.cookie + "<br />")
document.write("문서의 Domain name : " + document.domain + "<br />")
// -->
</script>
</body>
</html>
Document object 의 Method
어떤 Object에 관련해서 Method 라는게 여러개 있습니다. Method란 단어의 뜻 처럼 그 해당 Object를 다루는 방법이 되겠습니다. 그러므로 Document Object에 관련된 Method는 곧 Document Object를 다루는 방법으로서 이러한 Method들은 브라우저가 지원하게 됩니다. 아래의 표는 Document Object를 다루는 Method가 되겠습니다.
| Document Object Methods |
| close() |
document.open() method로 열린 문서를 닫는다. |
| getElementById(ID) |
지정된 ID 를 가진 element return |
| getElementsByName(name) |
지정된 name 를 가진 element return |
| open() |
새 문서를 연다. |
| write(string) |
문서에 문자열을 출력한다. |
| writeln(string) |
문서에 문자열 block을 출력한다. |
getElementById("ID") & getElementsByName("name") Method <html>
<head>
<script type="text/javascript">
<!--
function getElement()
{
var doc=document.getElementById("myPara")
alert("나의 이름은 " + doc.tagName + " element 입니다. ")
}
function getName()
{
var doc=document.getElementsByName("myName")
alert("모두 " + doc.length + " 개 입니다. ")
}
//-->
</script>
</head>
<body>
<button id="myPara" onclick="getElement()">
클릭하면 나의 Element 이름이 나옵니다.
</button><br />
<input name="myName" /><br />
<input name="myName" /><br />
<input name="myName" /><br />
<button onclick="getName()">클릭하면 Element의 갯수가 나옵니다.</button>
</body>
</html>
