DOM 이란
문서 객체 모델( DocumentObjectModel )은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 즉, DOM은 웹 페이지에 대한 인터페이스이다.
웹 페이지 생성 과정
웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 "Critical Rendering Path"라고 한다. 해당 과정은 대략 2단계로 나눌 수 있다. 첫 번째 단계에서 브라우저는 읽어 들인 문서를 파싱 하여, 최종적으로 어떤 내용을 페이지에 렌더링 할지 결정한다. 두 번째 단계에서 브라우저는 해당 렌더링을 수행한다.
첫 번째 과정을 거치면 "Render Tree"가 생성된다. 렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다. 브라우저는 렌더 트리를 생성하기 위해 DOM , CSSOM 두 모델이 필요하다.
DOM 생성 과정
DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.
DOM의 개체 구조는 아래와 같이 "노드 트리"로 표현된다.
DOM이 아닌 것
DOM은 HTML이 아니다. DOM은 HTML 문서로부터 생성되지만, 항상 동일하지 않다. DOM이 원본 HTML 소스와 다를 수 있는 두 가지 케이스가 있다.
1. 작성된 HTML 문서가 유효하지 않을 때
2. 자바스크립트에 의해 DOM이 수정될 때
DOM은 브라우저에서 보이는 것이 아니다.
브라우저 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다.
참고
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://wit.nts-corp.com/2019/02/14/5522
