CSSOM 트리 DOM과 무엇이 다른가?

 

웹이 전달되는 방향

 

서버로 부터 정적인 html 파일을 전달받은 웹 브라우저는 렌더링을 위해 HTML 파일과 CSS 파일을 파싱하여 하나의 계층 구조를 형성하게 됩니다. 이 때 HTML을 파싱한 모델이 DOM(Document Object Model)이고 CSS를 파싱한 것이 CSSOM(CSS Object Model) 입니다. 

 

 

CSS Object Model은 Javascript에서 CSS를 조작할 수 있는 API입니다. 즉 사용자가 JS를 사용해서 동적으로 CSS 스타일을 동적으로 관리할 수 있게 됩니다. 

HTML 문서가 계층적으로 작성되어 있기 때문에 HTML에 스타일을 적용하는 CSS 또한 계층 모델을 가지게 됩니다. 

즉, CSSOM과 DOM 모두 트리 형태의 계층 구조를 가지지만 CSSOM은 CSS를 DOM은 HTML을 파싱한 모델이라는 차이점을 가지고 있습니다.