DOM, CSSOM 웹 페이지 소스를 다운 받는 구조

DOM( Document Object Model)

 

EventTarget

↑

Node

↑            ↖           ↖

Document    Element    Text

↑

HTMLElement

↑                       ↖

HTMLInputElement    HTMLDivElement

 

브라우저가 HTML 파일을 읽어 어플리케이션이 이해할 수 있는 오브젝트 형식으로 변환한다.

또 그 모델은 트리형태를 띈다.

 

CSSOM( CSS Object Model)

 

DOM + CSS = CSSOM

 

DOM으로 HTML 파일을 오브젝트로 만든 후 CSS 파일을 오브젝트에 매핑시켜 파일을 적용 시킨다.

이때 사용자 지정 스타일 또는 inline 즉 브라우저가 기본값으로 정의하고 있는 스타일이 적용된다.

 

cascading rules 에 따라 위 작업이 완료가 되면 compute styles 상태가 된다.

 

DOM + CSSOM = Render Tree

 

Render Tree 는 오브젝트 모델의 작업이 완료가 되어 사용자에게 보여지는 부분만을 트리 모델로 만든것.

예로 display: none을 하여 태그가 보여지지 않을 수 있고, head 태그 부분들을 사용자에게 보여지지 않은 메타데이터 입니다. 때문에 보여지는 부분이 아닙니다.