DOM은 Document Object Model의 약자이다.
DOM에 관한 W3C와 MDN의 설명을 번역해서 정리해보면 다음과 같이 쓸 수 있다.
DOM(Document Object Model)은 유효한 HTML문서 혹은 XML문서를 위한 프로그래밍 인터페이스 입니다.
여기서 XML이란 EXtensible Markup Language의 약자이다. 간단하게 설명하면, 텍스트 기반 컴퓨터 자료 구조인 SGML을 HTML처럼 간략화, 표준화하면서 HTML과 호환될 수 있도록 만들어진 마크업 언어이다.
다시 돌아와서, DOM이란 마크업 언어를 구조화해 웹페이지를 프로그래밍 언어를 통해 변경할 수 있게 하는 API인 셈이다.
DOM을 먼저 이해하기 앞서, 웹 브라우저가 어떻게 동작하는지 알아보는 것이 도움이 될 것이다.
웹 브라우저 동작 원리
이 부분은 다음 두 문서를 상당 부분 참조하여 작성하였다.
먼저 동작 원리에 대해 간단하게 설명하면 다음과 같다.
- 사용자가 웹페이지를 요청하면 서버는 HTML, CSS, JavaScript등의 문서들을 브라우저로 응답한다.
- 이때 렌더링 엔진은 응답받은 문서들을 파싱한 뒤 트리를 생성한다. 트리를 생성하기 위해 필요한 두 모델이 바로 DOM(Document Object Model)과 CSSOM(Cascading Style Sheets Object Model)이다. 렌더링 엔진은 HTML과 CSS를 파싱하여 각각 DOM tree와 CSSOM tree를 생성한다.
- 자바스크립트는 렌더링 엔진이 아닌 자바스크립트엔진에 의해 파싱된다. 파싱한 결과를 노드 트리에 적용한다.
- 이를 기반으로 렌더 트리를 생성한다.
- 이렇게 생성된 렌더 트리를 기반으로 웹 브라우저는 사용자에게 필요한 정보를 페이지에 렌더링한다.
렌더링 엔진이 브라우저에 렌더링하기 위해 필요한 이 과정을 Critical Rendering Path, 즉 CRP라고 한다.
렌더링 엔진이HTML 문서를 파싱하고 태그들을 DOM tree로 변환하는 예시는 다음과 같다.
위와 같은 태그 구조를 아래와 같은 tree node로 변환한다.
위와 같은 구조의 트리노드를 DOM이라고 한다. 참조한 사이트에서는 DOM에 대해 다음과 같이 설명한다.
It is essentially an attempt to convert the structure and content of the HTML document into an object model that can be used by various programs.
즉 직역하자면 본질적으로는 HTML문서의 구조와 내용을 object model로 변환하여 다양한 프로그램에서 쓰일수 있도록 하는 시도이다.
CSSOM도 마찬가지로 트리노드로 표현되며, DOM, CSSOM, Javascript를 모두 합친 결과가 바로 렌더 트리이다.
DOM과 Javascript
웹 페이지를 수정하거나 생성하기 위해 Javascript에서 코드를 작성할 때,
document.getElementById("table");
와 같이 문서의 요소(element)에 접근해야 할 때가 생긴다. 이 때 이 element가 DOM 노드이며, DOM이 없다면 Javascript는 웹 브라우저의 요소에 대한 정보를 갖거나 조작할 수 없다.
여기서 HTML문서 내에서 script 태그가 body 태그 맨 아래에 있는 이유를 찾을 수 있다. 렌더링 엔진이 HTML문서 내부에서 script태그를 읽는 순간 바로 실행을 중지하고 자바스크립트 엔진으로 문서를 넘긴다. 자바스크립트는 생성된 DOM을 기준으로 실행되는데, 이 때 script 태그가 body 태그 맨 앞에 있다면 DOM 노드가 정상적으로 업데이트 되기 전이기 때문에 문제가 생길 수 있다.
이렇게 DOM, CSSOM, Javascript까지 모두 노드 트리에 적용하고 나면 렌더트리가 완성되고 이것을 기준으로 레이아웃을 생성한 뒤 브라우저에 나타내는 것이다.
결론
DOM에는 Javascript에 의해 수정된 노드들도 포함되며, 렌더 트리와 달리 CSSOM이 적용되지 않은 트리 노드이다.
지금까지 정리한 내용을 바탕으로 DOM을 한줄로 요약해서 표현하면 다음과 같다.
DOM은 HTML, XML과 같은 마크업 언어를 객체 모델(트리 노드)로 변환하여 Javascript, Java와 같은 프로그래밍 언어에서 접근 가능하게 하며, 웹 브라우저에 렌더링할 수 있도록 해주는 인터페이스인 셈이다.
참고 자료(References):
