JavaScript HTML DOM Document
HTML DOM 에서, document 객체는 당신의 웹페이지 입니다.
The HTML DOM Document
HTML DOM 객체 모델에서, document 객체는 웹 페이지를 나타냅니다.
document 객체는 웹 페이지의 모든 다른 객체의 소유자(owner) 입니다.
HTML 페이지에서 객체들에 접근하려면, 항상 document 객체에 접근으로부터 시작합니다.
다음은 HTML에 접근해서 조작하기 위해서 document 객체를 사용하는 방법의 몇 가지 예입니다.
Finding HTML Elements
| Method | Description |
|---|---|
| document.getElementById() | Finding an element by element id |
| document.getElementsByTagName() | Finding elements by tag name |
| document.getElementsByClassName() | Finding elements by class name |
| document.forms[] | Finding elements by HTML element objects |
Changing HTML Elements
| Method | Description |
|---|---|
| element.innerHTML= | Changing the inner HTML of an element |
| element.attribute= | Changing the attribute of an HTML element |
| element.setAttribute(attribute,value) | Changing the attribute of an HTML element |
| element.style.property= | Changing the style of an HTML element |
Adding and Deleting Elements
| Method | Description |
|---|---|
| document.createElement() | Create an HTML element |
| document.removeChild() | Remove an HTML element |
| document.appendChild() | Add an HTML element |
| document.replaceChild() | replace an HTML element |
| document.write(text) | Writing into the HTML output stream |
Adding Events Handlers
| Method | Description |
|---|---|
| document.getElementById(id).onclick=function(){code} | Adding event handler code to an onclick event |
Finding HTML Objects
첫번 째 HTML DOM Level 1 (1988) 은 11 개의 HTML Objects, object collections 와 속성(property)을 정의한다. 이들은 HTML5에서 아직 유효하다. 이 후에, HTML DOM Level 3 에서 더 많은 objects, collections 과 속성(property)들이 추가 되었다.
| Property | Description | DOM |
|---|---|---|
| document.anchors | Returns all <a> elements that have a name attribute | 1 |
| document.applets | Returns all <applet> elements (Deprecated in HTML5) | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the <body> element | 1 |
| document.cookie | Returns the document's cookie | 1 |
| document.doctype | Returns the document's doctype | 3 |
| document.documentElement | Returns the <html> element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete. Returns the DOM configuration | 3 |
| document.embeds | Returns all <embed> elements | 3 |
| document.forms | Returns all <form> elements | 1 |
| document.head | Returns the <head> element | 3 |
| document.images | Returns all <img> elements | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document's encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all <area> and <a> elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all <script> elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the <title> element | 1 |
| document.URL | Returns the complete URL of the document | 1 |