문서 객체 모델(DOM)

문서 객체 모델

 

• 문서 객체 모델(DOM)의 정의
  - 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
• DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 개체로 정의한다.

 

DOM 트리

 

• DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. 
• DOM은 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.
  

  

  DOM 트리

• 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.
• DOM 트리에서 가지가 갈려져 나간 항목을 노드(node)라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 루트(root) 노드라고 한다.
• 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다. 따라서 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있다.
  (부모 노드에는 자식 노드가 있으며, 부모 노드가 같은 형제 노드도 있다.)
• DOM을 구성하는 기본 원칙
  1. 모든 HTML 태그는 요소(element) 노드이다.
  2. HTML 태그에서 사용하는 내용은 자식 노드인 텍스트(text) 노드이다.
  3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다.
  4. 주석은 주석(comment) 노드이다.