X

문서객체모델 (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 표준 모델로 구분

 

[참고]

  • 책만, 한 권으로 읽는 컴퓨터 구조와 프로그래밍, 조너선 스타인하트(오현석 번역)
도리: