문서 객체 모델(DOM)

DOM의 개념

  • 문서 객체 모델 (DOM : Document Object Model) 은 XML, HTML 문서의 각 항목을 계층적으로 표현해 생성, 변형, 삭제 를 할 수 있도록 돕는 인터페이스이다.
  • 쉽게말해 웹 브라우저에서 HTML문서의 요소를 제어하기위해 생겨났으며, DOM은 동적으로 문서의 내용, 구조, 스타일에 접근할 수 있다.
  • 브라우저 사이에 DOM 구현이 호환되지 않음에 따라 W3C에서 DOM의 표준 규격을 작성하게 되었다.
  • DOM의 역사는 1990년 초반 넷스케이프와 마이크로 소프트사의 IE사이에서 브라우저 전쟁과 밀접한 관련이 있다. 이 전쟁 중 최전선에 있던것이 웹 브라우저의 레이아웃 엔진으로 사용했던 JavaScript, JScript였고 이 스크립트 엔진이 DOM을 주 API로 사용했던 것이다.

DOM은 W3C의 표준이며 W3C의 표준화한 API들의 기반이 된다.

DOM의 구조는 트리구조형태로 이루어지며 다음사진과 같다.

DOM-model.svg

W3C DOM표준은 세 가지 모델로 구분된다.

  • Core DOM : 모든 문서 타입을 위한 DOM 모델
  • HTML DOM : HTML문서를 위한 DOM 모델
    • HTML DOM은 HTML문서를 조작하고 접근하는 표준화된 방법을 정의합니다. 모든 HTML요소는 HTML DOM을 통해 접근할 수 있다.
  • XML DOM : XML 문서를 위한 DOM 모델
    • XML DOM은 XML문서에 접근해 그 문서를 다루는 표준화된 방법을 정의하고, 모든 XML요소는 XML DOM을 통해 접근 가능하다.

그렇다면 웹페이지에서 이 DOM은 어떻게 사용될까?

DOM이 사용되기 전 브라우저와 서버사이에서 화면이 그려지는 과정을 먼저 확인해보자.

Critical Rendering Path(CRP)라는 개념을 먼저 알아보자.

이 CRP는 브라우저에서 서버로부터 HTML문서를 받아서 랜더링을 진행할 시 진행되며 다음과같이 6단계로 나누어져있다.

  1. DOM 트리 생성
  2. CSSOM 트리 생성
  3. JavaScript 실행
  4. Render 트리 생성
  5. 레이아웃 생성
  6. 페인팅

과정이 있다.

여기에서 위에 설명한 DOM트리 생성과정이 진행되고 이 DOM트리로부터 html, element, text 에 대한 노드가 생성된다.

이후 CSSOM이라는 DOM과 유사한 트리가 생성되는데 이 CSSOM은 DOM과는 다르게 구조는 비슷하지만 상속관계와 선언관계등을 상관하지않고 각 노드에 관련되어서 생성된다. CSS의 특징으로는 상속된 계단식 특성을 가지고있음으로 부분적으로 실행이 불가능하고 문서의 뒷부분에 스타일이 재정의 될 경우 의도치않게 CSS가 적용되는 문제가 발생할 수도 있다.

JavaSciprt는 파서 차단 리소스로 간주되는데 흔히 html파일을 작성 중 script영역의 태그를 선언하고 스크립트 코드를 작성하게된다. 이 sciprt부분 부터는 기존 DOM의 파싱이 차단되기때문에 항상 HTML태그에 따른 내용을 전부 작성한 후 sciprt태그와 코드를 작성해야 한다. 혹은 이 JavaScript가 파서를 차단하지 않도록 하기 위해서 async옵션을 주기도 한다.

이후 Render Tree가 만들어지는데 이 Render Tree는 위에서 파싱된 DOM, CSSOM을 조합하여 결과적으로 랜더링 될 내용을 나타내는 트리이다.

레이아웃 생성에서는 뷰포트의 크기를 설정하는 단계이고 meta태그에 설정된 뷰포트에 맞게 설정된다.

마지막으로 페인팅으로는 페이지의 가시적인 내용을 픽셀로 변환해 화면에 나타나는 작업을 진행한다.

Reference

저작자표시 비영리 변경금지

+ Recent posts

티스토리툴바