DOM 과 CSSOM

DOM(Document Object Model)과 CSSOM(Cascading Style Sheets Object Model)은 웹 브라우저가 웹 페이지를 어떻게 해석하고 렌더링하는지에 대한 핵심적인 부분입니다. 이 두 모델은 웹 페이지의 구조와 스타일을 브라우저가 이해하고 사용자에게 시각적으로 표현할 수 있게 하는 방식을 정의합니다.

DOM (Document Object Model)

• 정의: DOM은 HTML 문서의 구조적 표현입니다. 웹 페이지의 모든 콘텐츠와 요소를 트리 구조로 나타내며, 각 노드는 HTML 문서 내의 태그, 속성, 텍스트 등을 나타냅니다.
• 용도: DOM은 JavaScript를 통해 동적으로 웹 페이지의 내용, 구조, 스타일을 변경할 수 있게 해줍니다. 예를 들어, DOM API를 사용하여 문서 내 요소를 추가, 삭제, 수정할 수 있습니다.
• 작동 방식: 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성합니다. 이 트리 구조를 통해 웹 페이지의 구조를 나타내며, JavaScript 등의 스크립트 언어가 이 구조와 상호작용할 수 있습니다.

CSSOM (Cascading Style Sheets Object Model)

• 정의: CSSOM은 CSS 스타일 시트의 구조적 표현입니다. DOM과 유사하게 트리 구조를 가지며, 웹 페이지에 적용된 스타일을 나타냅니다.
• 용도: CSSOM은 웹 페이지의 스타일 정보를 동적으로 읽고 수정하기 위한 API를 제공합니다. 예를 들어, JavaScript를 사용하여 페이지의 스타일을 프로그래밍 방식으로 변경할 수 있습니다.
• 작동 방식: 브라우저는 CSS 파일과 <style> 태그 내의 스타일을 파싱하여 CSSOM 트리를 생성합니다. 이 트리는 DOM과 결합되어 렌더 트리를 형성하며, 이는 최종적으로 사용자에게 시각적으로 표현되는 웹 페이지의 모습을 결정합니다.

DOM과 CSSOM의 결합

• DOM과 CSSOM은 서로 독립적으로 생성되지만, 최종적으로는 렌더 트리(Render Tree)를 형성하기 위해 결합됩니다. 렌더 트리는 웹 페이지를 렌더링할 때 실제로 그려야 할 요소와 그 스타일을 나타냅니다.
• 렌더 트리는 DOM 트리의 구조와 CSSOM 트리의 스타일 정보를 결합한 것으로, 비가시적 요소(예: display: none으로 설정된 요소)는 포함하지 않습니다.
• 브라우저는 렌더 트리를 기반으로 웹 페이지를 렌더링합니다. 이 과정에서 레이아웃(요소의 위치와 크기 계산)과 페인팅(요소 그리기) 단계를 거칩니다.

DOM과 CSSOM은 웹 개발의 기본적인 요소로, 웹 애플리케이션의 동적인 상호작용과 시각적 스타일을 제어하는 데 필수적입니다. 이해와 활용이 웹 페이지의 성능 최적화와 사용자 경험 향상에 큰 영향을 미칠 수 있습니다.