- 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다.
자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있습니다.
- 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
- HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
- HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
- HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
**DOM의 종류**
W3C DOM 표준은 세 가지 모델로 구분됩니다.
1. Core DOM : 모든 문서 타입을 위한 DOM 모델
2. HTML DOM : HTML 문서를 위한 DOM 모델
3. XML DOM : XML 문서를 위한 DOM 모델
DOM의 개체 구조는 “노드 트리”로 표현됩니다.
하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문입니다.
이 케이스의 경우, 루트 요소인 <html> 은 “부모 줄기”, 루트 요소에 내포된 태그들은 “자식 나뭇가지” 그리고 요소 안의 컨텐츠는 “잎”에 해당합니다.
```
요약정리
DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.
항상 유효한 HTML 형식입니다.
자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
가상 요소를 포함하지 않습니다. (Ex. ::after)
보이지 않는 요소를 포함합니다. (Ex. display: none)
```
j___x_x