2023년 11월 16일
문서객체모델 (DOM, Document Object Model)
1. 문서객체모델 (DOM, Document Object Model) 개념
- XML, HTML 등 웹 문서 접근을 위해 웹 문서 내 객체 노드를 트리 형태의 계층으로 구성하여 전위 순회 방식으로 접근하는 W3C 표준 인터페이스 모델
- 브라우저는 웹 문서(HTML 등)를 로드/파싱 후 문서객체모델을 생성하여 웹 정보를 순차적으로 처리
2. 문서객체모델의 구조 및 구성요소
(1) 문서객체모델의 웹문서 사례와 해당 구조
| 웹문서 사례 | <html> <head> <title> Dori’s Digital Life </title> </head> <body> DOM is <B>Document Object Model</B> </body> </html> |  |
|---|---|---|
| 해당 구조 | “엘리먼트 간 포함 관계로 구성”
| |
(2) 문서객체모델의 구성요소
1) 문서객체모델 내 위치에 따른 노드 구성요소
| 노드 | 위치 | 사례 |
|---|---|---|
| 루트 노드 (root node) | 트리의 최상위 노드 | <html> |
| 내부 노드 (interior node) | 하위 계층이 있는 노드 | <head>, <body> |
| 종단 노드 (terminal node) | 하위 계층이 없는 노드 | DOM is |
2) 문서객체모델 내 역할에 따른 관계 구성요소
| 관계 | 역할 | 사례 |
|---|---|---|
| 부모 관계 (parent) | 상하 관계 중 상위 계층 | <title>은 Dori’s Digital Life의 부모 |
| 자식 관계 (child) | 상하 관계 중 하위 계층 | Dori’s Digital Life은 <title>의 자식 |
| 조상 관계 (ancestor) | 직간접적 관계 중 상위 계층 | <body>는 Document Object Model의 조상 |
| 자손 관계 (descendant) | 직간접적 관계 중 하위 계층 | Document Object Model는 <body>의 자손 |
| 형제 관계 (sibling) | 동일 부모의 자식 노드 간 | <head>와 <body>는 형제 관계 |
- 문서객체모델은 엘리먼트간 포함 관계로 구성되며, 문서객체모델 접근 시 객체 간 포함 관계를 트리 형태로 구성하여 순차적으로 접근
3. 문서객체모델의 웹 문서 접근/처리 순서
 |
- 최상위 노드(root) 부터 시작하여 좌측 하위 트리 순서로 접근하는 전위 순회 방식의 순차 접근/처리
- 문서객체모델은 처리 대상에 따라 Core DOM, HTML DOM, XML DOM 3가지 W3C 표준 모델로 구분
[참고]
- 책만, 한 권으로 읽는 컴퓨터 구조와 프로그래밍, 조너선 스타인하트(오현석 번역)
About The Author
