CSSOM(CSS Object Model)

CSSOM

CSS Object Model은 JavaScript에서 CSS를 조작할 수 있는 API 집합이다.

HTML 대신 CSS가 대상인 DOM이라고 볼 수 있으며,

사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법이다.

 

CSSOM은 DOM과 CSS를 병합해서 만들어진다. (DOM+CSS=CSSOM)

정의한 스타일뿐만 아니라 브라우저에서 기본적으로 설정된 모든 속성값들과

Cascading rules에 따라서 합쳐진 모든 CSS값들이 정의되어 있다.

= computed style(모든 계산된 스타일)

 

---

Render Tree

Render Tree는 DOM과 CSSOM을 합쳐 만들어진다. (DOM + CSSOM = Render Tree)

Render Tree는 최종적으로 사용자에게 보여지는 것들만 선별되어 표기되며,

display:none, head태그 같은 것(실제로 보이지 않는것)들은 Render Tree에 포함되지 않는다.