DOM과 CSSOM

개념 설명

HTML 문서를 객체 트리로 표현한 DOM과 CSS 스타일을 트리 구조로 나타낸 CSSOM.

핵심 포인트

• DOM: HTML 요소를 노드 트리로 표현, JavaScript로 조작 가능
• CSSOM: CSS 규칙을 트리 구조로 표현, 스타일 계산에 사용
• 렌더 트리: DOM + CSSOM 결합으로 실제 화면에 그려질 요소만 포함
• DOM 조작 딴량: innerHTML < textContent < appendChild
• Virtual DOM은 이러한 DOM 조작 비용을 최적화하는 전략

예시 코드

// DOM 조작 비교
const container = document.getElementById('container');