작성자

freewebkorea

카테고리

비밀번호

제목

<H2>Document Object</H2>
이 번 페이지에서는 Document 객체가 가지고 있는 Property(하위 객체)들에 대해서 알아 보도록 하겠습니다. Document 객체의 Property들은 주로 문서(Document)내의 Link, Anchor, Image, Title 등 문서에 사용된 Tag에 대한 문서 내부적인 정보와 문서의 domain, Url 등 외부적인 정보와 정보 들을 알아 보는데 사용되며 아래의 그림에서 보는 바와 같이 document 객체에는 여러 개의 하위 객체들이 있으며, Layer와 Plugin은 Netscape에서만 적용됩니다. *** Property와 Method 이름은 대소문자를 학씨리 구분(Case-sensitive)합니다. <IMG oncontextmenu="return false" alt="browser_inner_object (13K)" src="http://www.cadvance.org/doc/java/images/browser_inner_object.gif"> 
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Document Object Properties</TD></TR>
<COLGROUP>
<COL class=syntaxLeftCell>
<COL class=syntaxRightCell>
<TBODY>
<TR>
<TD>anchors</TD>
<TD>문서에 포함된 anchor element collection return</TD></TR>
<TR>
<TD>applets</TD>
<TD>applet 에 포함된 모든 element collection return</TD></TR>
<TR>
<TD>body</TD>
<TD>body 또는 frameset return</TD></TR>
<TR>
<TD>cookie</TD>
<TD>문서의 쿠키 값 return</TD></TR>
<TR>
<TD>domain</TD>
<TD>문서의 도메인 이름 return</TD></TR>
<TR>
<TD>forms</TD>
<TD>문서의 form collection에 포함된 모든 element return</TD></TR>
<TR>
<TD>images</TD>
<TD>문서에 포함된 모든 image element collection return</TD></TR>
<TR>
<TD>links</TD>
<TD>문서내의 href attribute로 지정된 모든 anchor collection return</TD></TR>
<TR>
<TD>referrer</TD>
<TD>현재 문서의 링크가 있는 문서의 URL 값 return</TD></TR>
<TR>
<TD>title</TD>
<TD>문서의 title return 또는 지정</TD></TR>
<TR>
<TD>URL</TD>
<TD>문서의 URL 값 return</TD></TR></TBODY></TABLE> Document Object의 Property 예제 <PRE class=input id=document_property>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Document Object의 Property&lt;/title&gt;
 &lt;style type="text/css"&gt;
 &lt;!-- 
 img {border:1px solid royalblue;} 
 --&gt;
 &lt;/style&gt;
&lt;/head&gt;
&lt;body style="background-color:buttonface;"&gt;

&lt;fieldset style="padding:10px;"&gt;
 &lt;legend&gt;Document Object의 Property&lt;/legend&gt;
 &lt;a name="first"&gt;first&lt;/a&gt;&lt;br /&gt;
 &lt;a name="second"&gt;second&lt;/a&gt;&lt;br /&gt;
 &lt;a name="third"&gt;third&lt;/a&gt;&lt;br /&gt;
 &lt;form name="frm1"&gt;&lt;input value="form1" /&gt;&lt;/form&gt;&lt;br /&gt;
 &lt;form name="frm2"&gt;&lt;input value="form2" /&gt;&lt;/form&gt;
 &lt;img src="../../images/icon/ico_doc.gif" alt="ico_doc (1K)" /&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;img src="../../images/icon/ico_doc_new.gif" alt="ico_doc_new (1K)" /&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;img src="../../images/icon/ico_explanation.gif" alt="ico_explanation (1K)" /&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;a href="#first"&gt;link 1&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#second" id="link2"&gt;link 2&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#third"&gt;link 3&lt;/a&gt;&lt;br /&gt;
 &lt;/fieldset&gt;&lt;br /&gt;&lt;br /&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 document.write("문서의 배경색 : " + document.body.style.backgroundColor + "&lt;br /&gt;")
 document.write("문서의 제목 : " + document.title + "&lt;br /&gt;")
 document.write("문서에 포함된 anchor의 갯수 : " + document.anchors.length + "개&lt;br /&gt;")
 document.write("문서에 포함된 첫번째 anchor이름 : " + document.anchors[0].name + "&lt;br/&gt;")
 document.write("문서에 포함된 link의 갯수 : " + document.links.length + "개&lt;br /&gt;")
 document.write("문서에 포함된 두번째 link의 id : " + document.links[1].id + "&lt;br /&gt;")
 document.write("문서에 포함된 image의 갯수 : " + document.images.length + "개&lt;br /&gt;")
 document.write("문서의 URL : " + document.URL + "&lt;br /&gt;")
 document.write("문서에 포함된 form의 갯수 : " + document.forms.length + "개&lt;br /&gt;")
 document.write("문서의 첫 번째 form의 name 값 : " + document.forms[0].name + "&lt;br /&gt;")
 document.write("문서의 두 번째 form의 name 값 : " + document.forms[1].name + "&lt;br /&gt;")
 document.write("이 문서의 Link가 있는 file의 URL : " + document.referrer + "&lt;br /&gt;")
 document.write("문서의 cookie 값 : " + document.cookie + "&lt;br /&gt;")
 document.write("문서의 Domain name : " + document.domain + "&lt;br /&gt;")
 // --&gt;
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(document_property);open_window('../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=grayHr>
 Document object 의 Method 
어떤 Object에 관련해서 Method 라는게 여러개 있습니다. Method란 단어의 뜻 처럼 그 해당 Object를 다루는 방법이 되겠습니다. 그러므로 Document Object에 관련된 Method는 곧 Document Object를 다루는 방법으로서 이러한 Method들은 브라우저가 지원하게 됩니다. 아래의 표는 Document Object를 다루는 Method가 되겠습니다.
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Document Object Methods</TD></TR>
<COLGROUP>
<COL class=syntaxLeftCell>
<COL class=syntaxRightCell>
<TBODY>
<TR>
<TD>close()</TD>
<TD>document.open() method로 열린 문서를 닫는다.</TD></TR>
<TR>
<TD>getElementById(ID)</TD>
<TD>지정된 ID 를 가진 element return</TD></TR>
<TR>
<TD>getElementsByName(name)</TD>
<TD>지정된 name 를 가진 element return</TD></TR>
<TR>
<TD>open()</TD>
<TD>새 문서를 연다.</TD></TR>
<TR>
<TD>write(string)</TD>
<TD>문서에 문자열을 출력한다.</TD></TR>
<TR>
<TD>writeln(string)</TD>
<TD>문서에 문자열 block을 출력한다.</TD></TR></TBODY></TABLE> getElementById("ID") &amp; getElementsByName("name") Method <PRE class=input id=id_name>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 function getElement()
 {
 var doc=document.getElementById("myPara")
 alert("나의 이름은 " + doc.tagName + " element 입니다. ")
 }
 
 function getName()
 {
 var doc=document.getElementsByName("myName")
 alert("모두 " + doc.length + " 개 입니다. ")
 }
 //--&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button id="myPara" onclick="getElement()"&gt;
 클릭하면 나의 Element 이름이 나옵니다.
 &lt;/button&gt;&lt;br /&gt;
 &lt;input name="myName" /&gt;&lt;br /&gt;
 &lt;input name="myName" /&gt;&lt;br /&gt;
 &lt;input name="myName" /&gt;&lt;br /&gt;
 &lt;button onclick="getName()"&gt;클릭하면 Element의 갯수가 나옵니다.&lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(id_name);open_window('../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=blackHr>

<H2>Document Object</H2>
이 번 페이지에서는 Document 객체가 가지고 있는 Property(하위 객체)들에 대해서 알아 보도록 하겠습니다. Document 객체의 Property들은 주로 문서(Document)내의 Link, Anchor, Image, Title 등 문서에 사용된 Tag에 대한 문서 내부적인 정보와 문서의 domain, Url 등 외부적인 정보와 정보 들을 알아 보는데 사용되며 아래의 그림에서 보는 바와 같이 document 객체에는 여러 개의 하위 객체들이 있으며, Layer와 Plugin은 Netscape에서만 적용됩니다. *** Property와 Method 이름은 대소문자를 학씨리 구분(Case-sensitive)합니다. <IMG oncontextmenu="return false" alt="browser_inner_object (13K)" src="http://www.cadvance.org/doc/java/images/browser_inner_object.gif"> 
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Document Object Properties</TD></TR>
<COLGROUP>
<COL class=syntaxLeftCell>
<COL class=syntaxRightCell>
<TBODY>
<TR>
<TD>anchors</TD>
<TD>문서에 포함된 anchor element collection return</TD></TR>
<TR>
<TD>applets</TD>
<TD>applet 에 포함된 모든 element collection return</TD></TR>
<TR>
<TD>body</TD>
<TD>body 또는 frameset return</TD></TR>
<TR>
<TD>cookie</TD>
<TD>문서의 쿠키 값 return</TD></TR>
<TR>
<TD>domain</TD>
<TD>문서의 도메인 이름 return</TD></TR>
<TR>
<TD>forms</TD>
<TD>문서의 form collection에 포함된 모든 element return</TD></TR>
<TR>
<TD>images</TD>
<TD>문서에 포함된 모든 image element collection return</TD></TR>
<TR>
<TD>links</TD>
<TD>문서내의 href attribute로 지정된 모든 anchor collection return</TD></TR>
<TR>
<TD>referrer</TD>
<TD>현재 문서의 링크가 있는 문서의 URL 값 return</TD></TR>
<TR>
<TD>title</TD>
<TD>문서의 title return 또는 지정</TD></TR>
<TR>
<TD>URL</TD>
<TD>문서의 URL 값 return</TD></TR></TBODY></TABLE> Document Object의 Property 예제 <PRE class=input id=document_property>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Document Object의 Property&lt;/title&gt;
 &lt;style type="text/css"&gt;
 &lt;!-- 
 img {border:1px solid royalblue;} 
 --&gt;
 &lt;/style&gt;
&lt;/head&gt;
&lt;body style="background-color:buttonface;"&gt;

&lt;fieldset style="padding:10px;"&gt;
 &lt;legend&gt;Document Object의 Property&lt;/legend&gt;
 &lt;a name="first"&gt;first&lt;/a&gt;&lt;br /&gt;
 &lt;a name="second"&gt;second&lt;/a&gt;&lt;br /&gt;
 &lt;a name="third"&gt;third&lt;/a&gt;&lt;br /&gt;
 &lt;form name="frm1"&gt;&lt;input value="form1" /&gt;&lt;/form&gt;&lt;br /&gt;
 &lt;form name="frm2"&gt;&lt;input value="form2" /&gt;&lt;/form&gt;
 &lt;img src="../../images/icon/ico_doc.gif" alt="ico_doc (1K)" /&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;img src="../../images/icon/ico_doc_new.gif" alt="ico_doc_new (1K)" /&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;img src="../../images/icon/ico_explanation.gif" alt="ico_explanation (1K)" /&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;a href="#first"&gt;link 1&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#second" id="link2"&gt;link 2&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#third"&gt;link 3&lt;/a&gt;&lt;br /&gt;
 &lt;/fieldset&gt;&lt;br /&gt;&lt;br /&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 document.write("문서의 배경색 : " + document.body.style.backgroundColor + "&lt;br /&gt;")
 document.write("문서의 제목 : " + document.title + "&lt;br /&gt;")
 document.write("문서에 포함된 anchor의 갯수 : " + document.anchors.length + "개&lt;br /&gt;")
 document.write("문서에 포함된 첫번째 anchor이름 : " + document.anchors[0].name + "&lt;br/&gt;")
 document.write("문서에 포함된 link의 갯수 : " + document.links.length + "개&lt;br /&gt;")
 document.write("문서에 포함된 두번째 link의 id : " + document.links[1].id + "&lt;br /&gt;")
 document.write("문서에 포함된 image의 갯수 : " + document.images.length + "개&lt;br /&gt;")
 document.write("문서의 URL : " + document.URL + "&lt;br /&gt;")
 document.write("문서에 포함된 form의 갯수 : " + document.forms.length + "개&lt;br /&gt;")
 document.write("문서의 첫 번째 form의 name 값 : " + document.forms[0].name + "&lt;br /&gt;")
 document.write("문서의 두 번째 form의 name 값 : " + document.forms[1].name + "&lt;br /&gt;")
 document.write("이 문서의 Link가 있는 file의 URL : " + document.referrer + "&lt;br /&gt;")
 document.write("문서의 cookie 값 : " + document.cookie + "&lt;br /&gt;")
 document.write("문서의 Domain name : " + document.domain + "&lt;br /&gt;")
 // --&gt;
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(document_property);open_window('../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=grayHr>
 Document object 의 Method 
어떤 Object에 관련해서 Method 라는게 여러개 있습니다. Method란 단어의 뜻 처럼 그 해당 Object를 다루는 방법이 되겠습니다. 그러므로 Document Object에 관련된 Method는 곧 Document Object를 다루는 방법으로서 이러한 Method들은 브라우저가 지원하게 됩니다. 아래의 표는 Document Object를 다루는 Method가 되겠습니다.
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>Document Object Methods</TD></TR>
<COLGROUP>
<COL class=syntaxLeftCell>
<COL class=syntaxRightCell>
<TBODY>
<TR>
<TD>close()</TD>
<TD>document.open() method로 열린 문서를 닫는다.</TD></TR>
<TR>
<TD>getElementById(ID)</TD>
<TD>지정된 ID 를 가진 element return</TD></TR>
<TR>
<TD>getElementsByName(name)</TD>
<TD>지정된 name 를 가진 element return</TD></TR>
<TR>
<TD>open()</TD>
<TD>새 문서를 연다.</TD></TR>
<TR>
<TD>write(string)</TD>
<TD>문서에 문자열을 출력한다.</TD></TR>
<TR>
<TD>writeln(string)</TD>
<TD>문서에 문자열 block을 출력한다.</TD></TR></TBODY></TABLE> getElementById("ID") &amp; getElementsByName("name") Method <PRE class=input id=id_name>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 function getElement()
 {
 var doc=document.getElementById("myPara")
 alert("나의 이름은 " + doc.tagName + " element 입니다. ")
 }
 
 function getName()
 {
 var doc=document.getElementsByName("myName")
 alert("모두 " + doc.length + " 개 입니다. ")
 }
 //--&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button id="myPara" onclick="getElement()"&gt;
 클릭하면 나의 Element 이름이 나옵니다.
 &lt;/button&gt;&lt;br /&gt;
 &lt;input name="myName" /&gt;&lt;br /&gt;
 &lt;input name="myName" /&gt;&lt;br /&gt;
 &lt;input name="myName" /&gt;&lt;br /&gt;
 &lt;button onclick="getName()"&gt;클릭하면 Element의 갯수가 나옵니다.&lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(id_name);open_window('../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)