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

 

[참고]

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

콘텐츠 사용 시 출처 표기 부탁 드리고, 댓글은 큰 힘이 됩니다^^