Document Object


Home > Document > JavaScript > Object > Document object

Document Object

이 번 페이지에서는 Document 객체가 가지고 있는 Property(하위 객체)들에 대해서 알아 보도록 하겠습니다. Document 객체의 Property들은 주로 문서(Document)내의 Link, Anchor, Image, Title 등 문서에 사용된 Tag에 대한 문서 내부적인 정보와 문서의 domain, Url 등 외부적인 정보와 정보 들을 알아 보는데 사용되며 아래의 그림에서 보는 바와 같이 document 객체에는 여러 개의 하위 객체들이 있으며, Layer와 Plugin은 Netscape에서만 적용됩니다.

*** Property와 Method 이름은 대소문자를 학씨리 구분(Case-sensitive)합니다.

browser_inner_object (13K)
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>
코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색