-DOM-

DOM이란 Document Object Model

DOM을 이해하기 위해 웹 페이지의 빌드과정을 이해하자!

Critical Rendering Path

브라우저가 서버에서 페이지에 대해 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 한다.
웹 브라우저가 원본 HTML 문서를 읽은 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기 까지의 과정을
Critical Rendering Path 라고한다.

CRP는 총 6단계를 거친다.

1. DOM Tree 구축

2. CSSOM Tree 구축

3. JavaScript 실행

4. 렌더 트리 구축

5. 레이아웃 생성

6. 페인팅

이를 2단계로 요약하면

1. 브라우저는 읽어드린 문서를 파싱하여, 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다( 이 단계에서 렌더 트리가 결정)

2. 브라우저는 해당 렌더링을 실행한다.

렌더 트리 - 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다.

DOM, CSSOM으로 이루어진다.

DOM - 웹 페이지에 대한 프로그래밍 인터페이스.

기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 스타일을 읽고 조작할 수 있는 API를 제공한다.

1. DOM의 생성 방식

DOM은 원본 HTML 문서의 객체 기반 표현 방식이며, DOM의 개체 구조는 노드 트리로 표현된다.

HTML4에서는 doctype w3c니 길었는데 5에서는 ! dctype html로 바뀜

My first web page

Hello, world!

How are you?

이걸 노드 트리로 바꾸면

html
ㄴhead
ㄴtitle
ㄴMy first web page
ㄴbody
ㄴh1
ㄴHello,World!
ㄴp
ㄴHow are you?

2. DOM과 HTML의 차이점

DOM은 HTML 문서로부터 생성이 되지만, 항상 동일하지 않다.

HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다.

DOM : HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다.

DOM이 원본 HTML과 다를 수 있는 두 가지 케이스

1) 작성된 HTML 문서가 유효하지 않을 떄

DOM은 유효한 HTML 문서의 인터페이스이다. DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정한다.

2) JavaScript에 의해 DOM이 수정될 때

DOM은 HTML 문서의 내용을 볼 수 있는 인터페이스 역할을 하는 동시에 동적 자원이 되어 수정될 수 있다.

3. DOM은 브라우저에서 보이는 것이 아니다.

브라우저 뷰포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다.

렌더트리는 오직 렌더링되는 요소만 관련이 있고, 스크린에 그려지는 것으로 구성되어 있어 시각적으로 보이지 않는

요소들은 제외되기 때문에 DOM과는 다르다.

1) display : none 스타일 속성을 가지고 있는 요소

Hello, world!

How are you?

렌더 트리에 해당하는 뷰 포트에 표시되는 내용은

요소를 포함하지 않는다.

그러나, DOM은

를 포함한다.

4. DOM은 개발도구에서 보이는 것이 아니다.

개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공하지만, 개발도구의 요소 검사기에는 DOM에 없는 추가적인 정보를 포함한다.

1) CSS의 가상 요소

::before과 ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성하지만 DOM은 오직 원본 HTML 문서로부터 빌드 되고,

요소에 적용되는 스타일을 포함하지 않기 때문에 기술적으로 DOM의 일부는 아니다.