브라우저 렌더링시 HTML 파싱의 결과물로 생성되는 것이 DOM tree이고, DOM tree와 CSSOM tree를 결합하여 렌더트리를 생성한다. 만약 스크립트에서 DOM API를 통해 DOM을 조작하는 코드가 있다면, 이를 반영하여 렌더트리가 업데이트 된다..
근데 여기서 계속 등장하는 DOM. DOM은 무엇일까?
Document Object Model
문서 객체 모델. HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료 구조다.
DOM (Document Object Model) 은 HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API입니다. DOM은 browser에서 로드되며, node 트리(각 노드는 문서의 부분을 나타냅니다)로 표현하는 문서 모델입니다(예, element, 문자열, 또는 주석).
위의 정의를 이해하기 위해서 먼저 HTML문서의 구조를 살펴봐야한다. HTML은 요소(element)로 구성되어 있다. 그럼 다시 요소는 무엇일까?
위 HTML 문서를 살펴보면 모두 태그로 이루어져 있다. 그럼 요소는 태그인가?
<h1>Hello World</h1><h1>, </h1>은 태그이다. <h1>Hello World </h1> 은 요소이다. 태그는 요소의 시작과 끝을 나타내고, 요소는 시작 태그로부터 종료 태그까지의 전체 구성을 포함하는 개념이다.
다시 위의 HTML 문서를 살펴보면, 모든 것이 태그로 이루어져 있다. <HTML> ... </HTML> 전체가 HTML 요소이다. 그 속에 있는 <head>, <body> 모두 요소(element)이다.
노드
html 요소는 렌더링 엔진에 의해서 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.
<p id="hiddenText" style="display: none;">HTML, CSS, Javascript로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것!</p>위 HTML요소는 어떻게 파싱되어 노드객체로 변환될까? 위 요소는 다음과 같이 구성되어 있다.
<p>, </p> : 시작태그와 종료태그
id, style : attribute name (속성명)
hiddenText, display : none : attribute value (속성값)
HTML, CSS, Javascript로 ... 출력하는 것 : 콘텐츠
시작태그와 종료태그와 같은 태그는 요소노드로, 콘텐츠는 텍스트 노드로, 속성이름과 속성값은 어트리뷰트 노드로 변환된다.
그런데 HTML 요소의 콘텐츠 자리에는 위와 같이 텍스트만 들어가는 것이 아니다. 다른 HTML 요소도 들어갈 수 있다.
<ul>
<li>클라이언트 사이드 렌더링</li>
<li>서버 사이드 렌더링</li>
</ul>코드를 입력하세요<ul> 태그의 contents 자리에 <li>태그가 들어가는 경우처럼 HTML 요소는 중첩 관계를 갖는다. 요소들 간의 중첩관계에 의해서 계층적인 부모-자식 관계가 형성된다. 위의 코드에서는 ul태그가 li 태그의 부모 노드, li 태그는 ul 태그의 자식 노드가 되는 것이다. 그리고 이렇게 형성된 부모-자식 관계들로 이루어진 노드 간의 계층구조, 한마디로 노드의 가계도가 DOM인 것이다.
참조
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
모던 자바스크립트 Deep Dive
