문서 객체 모델은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
즉 DOM은 웹 브라우저가 html 페이지를 인식하는 방식을 말한다. (트리구조)
[ DOM의 종류 ]
W3C DOM 표준은 세 가지 모델로 구분됩니다.
Core DOM - 모든 문서 타입을 위한 DOM 모델
HTML DOM - HTML 문서를 위한 DOM 모델
XML DOM - XML 문서를 위한 DOM 모델
※ XML : Extensible Markup Language
[ DOM Tree ]
DOM Tree는 네 종류의 노드로 구성된다.
문서 노드(Document Node)
트리의 최상위에 존재하며 각각 Element, Attribute, Text 노드에 접근하려면 문서 노드를 통해야 한다.
요소 노드(Element Node)
Element 노드는 HTML Element를 표현한다. HTML Element는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 Element 노드는 문서의 구조를 서술한다고 말 할 수 있다.
Attribute, Text 노드에 접근하려면 먼저 Element 노드를 찾아 접근해야 한다. 모든 Element 노드는 Element별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다.
어트리뷰트 노드(Attribute Node)
Attribute 노드는 HTML Element의 Attribute를 표현한다. Attribute노드는 해당 Attribute가 지정된 Element의 자식이 아니라 해당 Element의 일부로 표현된다. 따라서 해당 Element 노드를 찾아 접근하면 Attribute를 참조, 수정할 수 있다.
텍스트 노드(Text Node)
Text노드는 HTML Element의 Text를 표현한다. Text 노드는 Element 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, Text노드는 DOM tree의 최종단이다.
[ DOM Tree의 객체 구성 ]
CSSOM은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS스타일을 동적으로 읽고 수정할 수 있는 방법입니다.
즉, CSSOM은 DOM을 스타일링 하기 위한 페이지의 모든 스타일 정보를 포함합니다.
우리가 사용하는 DOM 은 모든 요소들이라고 했죠? 이 CSSOM은 그와 같이 HTML트리가 로드가 되면 다음 CSS 트리가 로드되게 되어 우리가 꾸민 CSS 를 적용하게되며 이둘을 합쳐 CSSOM이라는 것을 만들게 됩니다. (DOM + CSS = CSSOM)
[ DOM과 CSSOM의 차이점 ]
CSSOM은 DOM과 유사하지만 다릅니다. DOM의 구조는 점진적으로 증가하는 반면에 CSSOM은 그렇지 않습니다.
CSS는 렌더링을 막습니다: 브라우저는 모든 CSS를 처리하고 수신할 때까지 페이지 렌더링을 막습니다. CSS는 규칙을 덮어쓸 수 있기 때문에 렌더링을 막습니다. 그러므로 CSSOM이 완료될 때까지 콘텐츠를 렌더링 할 수 없습니다.
Render Tree에는 사용자에게 궁극적으로 보여지는 아이들만 렌더링 되어집니다.
Render Tree는 콘텐츠와 스타일 둘 다 캡쳐합니다. DOM과 CSSOM 트리는 Render Tree에 결합됩니다. Render Tree를 구성하기 위해 브라우저는 DOM 트리의 root에서 시작해 모든 노드를 확인하면서 어떤 CSS 규칙들을 첨부할지 결정합니다.
Render Tree는 오직 보여지는 콘텐츠만은 캡쳐합니다. (일반적으로) 헤드 섹션은 보여지는 정보를 포함하고 있지 않으므로 Render Tree 안에 포함되지 않습니다. 또한 만약 요소에 display: none 이 적용되어 있다면, 해당 요소 또는 하위 요소는 포함되지 않습니다.