[HTML] HTML DOM이란? + HTML 렌더링 과정

DOM이란?

DOM(문서 객체 모델)은 The Document Object Model의 약자로, HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 HTML, XML 의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있도록 돕는다.

HTML 문서가 브라우저에 로드되면 브라우저는 문서 내용을 파싱하여 브라우저가 이해할 수 있는 객체 모델로 변환한다. 이렇게 변환된 객체 모델을 DOM이라고 하는 것이다. DOM은 HTML 문서의 각 요소를 객체로 나타내며, 이 객체들은 상호 연관된 계층 구조를 갖는다.

이런 DOM 객체들은 JS와 같은 클라이언트 사이드 스크립트 언어를 통해 동적으로 조작할 수 있다. 예를들어 DOM을 이용하여 HTML 문서 내의 특정 요소를 선택하거나, 요소의 내용을 변경하거나, 요소의 스타일 등을 변경할 수 있다.

DOM의 동작 구조

HTML 문서의 DOM은 계층 구조로 이루어져있다. 이 계층 구조는 HTML 문서 내에 있는 모든 요소를 상호 연관된 노드로 나타낸다. 이러한 노드들을 통해 HTML 문서의 내용을 클라이언트 측에서 동적으로 조작할 수 있다.

DOM 구조에서는 다음과 같은 노드 타입들이 존재한다.

1. 문서 노드(Document node): 문서 자체를 나타낸다. HTML 문서의 최상위 노드이다.
2. 요소 노드(Element node): HTML 문서 내의 요소를 나타낸다. 요소 노드는 태그 이름, 속성, 자식 노드 등을 포함한다.
3. 속성 노드(Attribute node): HTML 문서 내의 속성을 나타낸다. 요소 노드 내에 포함되어 있다.
4. 텍스트 노드(Text node): HTML 문서 내의 텍스트를 나타낸다. 요소 노드 내부에 포함되어 있으며, 요소의 내용을 나타낸다.

DOM에서는 요소 노드와 텍스트 노드가 상호작용하며, 이러한 상호작용은 브라우저에서 HTML 문서를 렌더링하는 과정에서 이루어진다. 예를 들어, 요소 노드 내에 있는 텍스트 노드의 내용을 변경하거나, 새로운 요소 노드를 추가하는 등의 작업을 통해, HTML 문서를 동적으로 조작할 수 있다.

DOM의 동작 구조는 브라우저마다 다소 차이가 있을 수 있지만, 대체적으로는 HTML 문서가 브라우저에 로드되면, 브라우저는 문서를 파싱하여 DOM 트리를 생성한다. 이후에는 클라이언트 측에서 JavaScript를 이용하여 DOM 객체를 조작하고, 변경된 내용이 브라우저 화면에 반영된다.

HTML 렌더링 과정

HTML 렌더링 과정은 다음과 같은 단계로 이루어진다.

1. 브라우저는 HTML 문서를 받아온다.
2. 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다. 이때, 브라우저는 문서 내의 태그, 속성, 텍스트 등을 읽고, 요소 노드, 속성 노드, 텍스트 노드 등을 생성한다.
3. DOM 트리 생성이 끝나면, 브라우저는 CSS 파일과 같은 스타일 시트를 다운로드하고 파싱한다. 이때, 스타일 시트는 브라우저에게 문서 내의 요소들에 대한 스타일 정보를 제공한다.
4. 스타일 시트 파싱이 끝나면, 브라우저는 스타일 정보와 DOM 트리를 결합하여 렌더 트리를 생성한다. 이때, 브라우저는 각 요소의 크기, 위치, 색상 등을 계산한다.
5. 렌더 트리 생성이 끝나면, 브라우저는 렌더 트리를 기반으로 화면에 요소들을 배치하고, 브라우저 창에 렌더링한다. 이때, 브라우저는 각 요소를 올바른 위치와 크기에 배치하고, 각 요소를 표시한다.
6. 브라우저는 사용자가 인터랙션을 하면, 이에 대한 처리를 수행한다. 이때, 사용자 인터랙션에 따라 요소들의 위치나 스타일이 변경될 수 있으며, 변경된 내용은 다시 렌더 트리에 반영되어 브라우저 창에 다시 렌더링된다.

위와 같은 과정을 거쳐 브라우저는 HTML 문서를 렌더링하고, 사용자는 이를 통해 웹 페이지를 보거나 인터랙션을 할 수 있다.