HTML DOM(Document Object Model)은 HTML 문서를 구성하고 있는 모든 HTML 엘레멘츠(elements)를 노드로 보고 노드에 접근하기 위한 방법을 제공한다. DOM은 원래 DNM(Document Node Model)으로 불렸으나 부르기 힘들다는 이유로 DOM(Document Object Model)로 부르게 되었다.
DOM에 따르면 HTML 문서는 모두 Node로 구성되어 있다고 본다.
- 문서 전체는 Document Node이다.
- 모든 HTML 엘레멘트는 Element Node이다.
- HTML 엘레멘트의 텍스트는 Text Node이다.
- 모든 HTML 속성은 Attribute Node이다.
- 커멘드는 Comment Node이다.
따라서 HTML 문서의 모든 엘레멘트를 노드(Node) 또는 객체(Object)로 보고 엘레멘트에 접근해 변경,추가,삭제하는 방법을 제공하는 HTML API의 일종이다.
또한, HTML DOM은 HTML 문서를 tree-structure로 나타낸다. 이 tree structure를 node-tree라고 부른다. 모든 노드는 트리를 통해 접근할 수 있다.
[W3C에 있는 HTML 문서의 트리 구조]
■ HTML DOM에서 말하는 노드(Node)
Document 노드를 최상위 노드로 가진 HTML 문서는 <html>노드를 자식으로 가지면 Document 노드를 제외한 최상위 노드가 된다.
<html>노드는 <head>와 <body>노드를 자식으로 가지고 있으며, <head>노드는 <title>노드를 자식으로 가진다. 여기서 <title>노드 안에있는 "My Title"이라는 텍스트 노드는 <title> 엘레멘트의 값이 아니라 자체적인 텍스트 노드인 셈이다. 따라서 <title>노드로 접근해 텍스트 값을 변경하는 것이 아니라 <title>노드의 innerHTML 프로퍼티를 사용해 변경할 수 있다.
이와 같이 DOM에서는 HTML 문서 내의 모든 엘레멘트는 노드(Node)로 간주한다. DOM에서는 HTML 문서를 최상위 노드인 <html>로 시작하는 집합적인 트리 구조를 되어 있다고 간주하며, HTML 문서는 부모-자식 관계가 명학하게 구분되어 있어야 한다.
이렇게 문서의 구조를 트리구조로 간주해 노드를 통해 문서의 내용에 접근하여 수정,생성,삭제 등의 방법을 제공하는 것이 HTML DOM이다. 이와 같은 이유로 HTML 문서는 태그의 시작과 종료가 명확하게 구분되어야 하며, 구조적으로는 집합적 트리구조를 명확하게 지켜야 한다.
'Java Script & DOM > HTML DOM' 카테고리의 다른 글
| HTML DOM - designMode 속성 ( 웹 브라우저창 편집 모드) (0) | 2009.09.22 |
|---|---|
| HTML DOM - createElement("tagName") : 새로운 태그 생성 (0) | 2009.09.22 |
| WYSIWYG(위지윅) 에디터 제작 기초 (0) | 2009.08.25 |
| 마우스 오버시 이미지가 계속 커지게 하는 방법 (0) | 2009.08.18 |
| DHTML(Dynamic HTML) 이란 (0) | 2009.06.30 |