[JS] 문서 객체 모델 (DOM)

문서 객체 모델(DOM, Document Object Model)

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

 

• HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음
• DOM은 웹 문서를 하나의 객체로 정의
• 웹 문서를 이루는 텍스트, 이미지, 표 등의 모든 요소도 각각 객체로 정의

웹 문서 전체 - Document 객체

삽입한 이미지 - image 객체 

 

DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리함.

 

DOM 트리

부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.

DOM 트리에서 가지가 갈라져 나간 항목을 노드(node)라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다고 해서 루트(root)노드라고 한다.

 

DOM을 구성하는 기본 원칙은 다음과 같다.

• 모든 HTML 태그는 요소노드임
• HTML 태그에서 사용하는 텍스트 내용은 자식노드인 텍스트 노드임
• HTML 태그에 있는 속성은 자식 노드인 속성 노드임
• 주석은 주석 노드임