JavaScript HTML DOM Document
HTML DOM 문서 오브젝트는 웹 페이지의 다른 다큐먼트 오브젝트(Document Object)의 소유자입니다.
다큐먼트 오브젝트는 웹 페이지를 나타냅니다.
HTML 페이지에서 어떤 요소에 접근할 경우 다큐먼트 오브젝트에 접근하는 것으로 시작하여야 합니다.
HTML에 접근해서 조작하기 위해 다큐먼트 오브젝트를 사용하는 방식의 예제는 하기와 같습니다.
Method | Description |
---|---|
document.getElementById(id) | 요소 id로 요소를 찾습니다. |
document.getElementByTagName(name) | 태그 명으로 요소를 찾습니다. |
document.getElementByClassName(name) | 클래스 명으로 요소를 잦습니다. |
Property | Description |
---|---|
element.innerHTML = new html content | 요소의 내부 HTML을 변경합니다. |
element.attribute = new value | HTML 요소의 속성 값을 변경합니다. |
element.style.property = new style | HTML 요소의 스타일을 변경합니다. |
Method | Description |
element.setAttribute(attribute, value) | HTML 요소의 속성 값을 변경합니다. |
Method | Description |
---|---|
document.createElement(element) | HTML 요소를 생성합니다. |
document.removeChild(element) | HTML 요소를 제거합니다. |
document.appendChild(element) | HTML 요소를 추가합니다. |
document.replaceChild(new, old) | HTML 요소를 교체합니다. |
document.write(text) | HTML 출력 스트림에 작성합니다. |
최초의 HTML DOM 레벨 1 (1998)은 11 개의 HTML 오브젝트, 오브젝트 컬렉션 및 속성을 정의했습니다. HTML5에서도 여전히 유효합니다.
나중에 HTML DOM 레벨 3에서 더 많은 오브젝트, 컬렉션 및 속성이 추가되었습니다.
Property | Description | DOM |
---|---|---|
document.anchors | 이름 속성을 가진 모든 <a> 요소를 반환합니다. | 1 |
document.applets | 모든 <applet>요소들을 반환합니다.(HTML5에서는 권장하지 않습니다) | 1 |
document.baseURI | 다큐먼트의 절대 기본 URI (absolute base URI)를 반환합니다. | 3 |
document.body | <body> 요소를 반환합니다. | 1 |
document.cookie | 다큐먼트의 쿠키를 반환합니다. | 1 |
document.doctype | 다큐먼트의 doctype을 반환합니다. | 1 |
document.documentElement | <html> 요소를 반환합니다. | 3 |
document.documentMode | 브라우저가 사용한 mode를 반환합니다. | 3 |
document.documentURI | 다큐먼트의 URI를 반환합니다. | 3 |
document.domain | 다큐먼트 서버의 도메인 명을 반환합니다. | 1 |
document.domConfig | Obsolete(구식의). DOM 구성을 반환합니다. | 3 |
document.embeds | 모든 <embed> 요소를 반환합니다. | 3 |
document.forms | 모든 <form> 요소를 반환합니다. | 1 |
document.head | <head> 요소를 반환합니다. | 3 |
document.images | 모든 <img> 요소를 반환합니다. | 1 |
document.implementation | DOM implementation(실행)을 반환합니다. | 3 |
document.inputEncoding | 다큐먼트의 인코딩(문자 집합)을 반환합니다. | 3 |
document.lastModified | 다큐먼트가 업데이트된 일자와 시간을 반환합니다. | 3 |
document.links | href 속성을 가진 모든 <area>와 <a> 요소를 반환합니다. | 1 |
document.readyState | 다큐먼트의 (로딩) 상태를 반환합니다. | 3 |
document.referer | referrer(링크 문서)의 URI를 반환합니다. | 1 |
document.scripts | 모든 <script> 요소를 반환합니다. | 3 |
document.strictErrorChecking | 오류 검사(error checking)가 실행되는지를 반환합니다. | 3 |
document.title | <title> 요소를 반환합니다. | 1 |
document.URL | 다큐먼트의 전체 URL을 반환합니다. | 1 |