DOM(Document Object Model)과 CSSOM(CSS Object Model)은 모두 웹 페이지의 구조와 스타일을 표현하는 객체 모델입니다.
- DOM(Document Object Model):
- DOM은 웹 페이지의 구조를 표현하는 객체 모델입니다. HTML, XML 문서의 요소(element), 속성(attribute), 텍스트 등을 객체로 나타냅니다.
- DOM은 트리 구조로 이루어져 있으며, 문서의 루트를 나타내는
document객체를 시작으로 요소들이 부모-자식 관계로 연결됩니다. - DOM을 사용하면 JavaScript를 통해 문서의 내용을 동적으로 변경하거나 조작할 수 있습니다. 예를 들어, 새로운 요소를 생성하거나 기존 요소의 스타일이나 속성을 변경할 수 있습니다.
- CSSOM(CSS Object Model):
- CSSOM은 웹 페이지의 스타일 정보를 표현하는 객체 모델입니다. CSS 스타일 시트의 규칙(rule)과 속성(property)들을 객체로 나타냅니다.
- CSSOM은 웹 페이지의 각 요소에 적용된 스타일 규칙을 나타내며, 이를 통해 요소의 스타일을 변경하거나 계산할 수 있습니다.
- 웹 브라우저는 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성한 다음, 이들을 결합하여 렌더링 트리(Rendering Tree)를 생성합니다. 이 렌더링 트리는 화면에 표시되는 최종적인 요소와 스타일 정보를 포함합니다.
DOM과 CSSOM은 서로 다른 측면에서 웹 페이지를 표현하며, JavaScript를 통해 이를 조작하여 동적인 웹 페이지를 만들 수 있습니다. JavaScript를 사용하여 DOM과 CSSOM에 접근하고 조작함으로써 웹 페이지의 내용과 스타일을 변경할 수 있습니다.
😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀