DOM

DOM (Document object Model)

문서 객체 모델(The Document Object Model, DOM) 은 문서(HTML, XML 등)의 프로그래밍 interface로 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 그리고 DOM은 nodes와 objects로 문서를 표현해 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜준다.

• 문서를 브라우저에 렌더링하려면 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 문서를 로드한 후, 파싱하여 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다.즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이 객체들을 부자 관계로 표현할 수 있는 트리 구조로 구성한 것이 DOM이다.

• DOM은 자바스크립트를 통해 동적으로 변경 할 수 있으며, 변경된 DOM은 랜더링에 반영된다.

  • 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데 이를 DOM API라고 부른다.

  • 이는 웹페이지에 접근해 웹페이지를 동적이게 만드는 유일한 방법이 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한것이 DOM에 접근하고 변경하는 프로퍼티와 메서드의 집합체인 DOM API라는 것이다.

  • DOM API를 통해 웹페이지를 변경하는 것은 랜더링되는 DOM을 변경하는 것이지 실제 html문서가 아니다. 변경사항은 html에 저장되지 않는다.

DOM tree

DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다.

• DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며, Document 객체의 자식이다.
• 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현한다. DOM tree의 최상위개체는 document며, 최하위 객체는 텍스트 객체다.

  

• 노드의 종류
  1. 문서 노드 (Document Node) : 트리의 최상위요소, 다른 노드들에 접근하기 위해서 지나야하는 진입점
  2. 요소 노드 (Element Node) : HTML요소를 표현, 문서의 구조를 서술한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성
  3. 어트리뷰트 노드 (Attribute Node) : 어트리뷰트 노드는 HTML요소의 어트리뷰트를 표현, 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정 가능하다.
  4. 텍스트 노드 (Text Node) : 택스트 노드는 HTML요소의 텍스트를 표현, 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다.

중요 랜더링 경로 (Critical Rendering Path)과 DOM의 생성

중요 랜더링 경로는 브라우저가 HTML, CSS, Javscript를 화면에 출력하는 일련의 과정을 뜻한다.

1. 웹페이지 또는 어플리케이션에 대한 요청으로 시작하여 서버는 응답 헤더 또는 데이터로 HTML을 반환한다.
2. 브라우저는 HTML을 분석하고 수신된 바이츠를 DOM 트리로 변환한다.
3. 브라우저는 스타일시트, 스크립트 혹은 외부자원에 대한 링크를 찾을때마다 요청을 한다.
4. CSSOM(Css Style Sheet)를 구축하는 작업이 끝날때까지 요청을 만들고, DOM을 생성하는 HTML을 계속 분석한다.
5. DOM과 CSSOM이 완료되면 브라우저는 렌더 트리를 생성하고 보여지는 컨텐츠를 위해 스타일을 계산한다.
6. 렌더트리가 완료된 후 모든 렌더 트리 요소들에 대한 위치와 크기가 정의된 레이아웃이 만들어진다.
7. 페이지는 렌더링되거나 또는 화면에 그려넣는다.

• DOM 구성은 점진적으로 증가한다.

  1. HTML 응답은 토큰으로, 토큰은 노드로, 노드는 DOM 트리로 변환된다.

  2. 1개의 DOM 노드는 시작태그 토큰으로 시작해서 끝태그 토큰으로 끝난다.

  3. 노드들은 HTML 요소에 대한 모두 연관성 있는 정보를 포함하고 있으며, 그 정보는 토큰을 통해 설명된다.

  4. 노드들은 토큰의 위계서열을 기반으로 DOM 트리안에 연결된다.

  5. 만약 또 다른 시작태그와 끝태그의 묶음이 한 세트의 시작태그와 끝태그 사이에 있다면, DOM 트리의 위계서열을 정의하는 방법으로 노드안에 자식 노드를 가지게 된다.

     

---

참고 사이트

• poiemaweb-문서 객체 모델(Document Object Model)
  https://poiemaweb.com/js-dom
• MDN-DOM 소개
  https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
• MDN-중요 렌더링 경로
  https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path

이미지 출처

• poiemaweb-문서 객체 모델(Document Object Model)
  https://poiemaweb.com/js-dom