웹 페이지는 어떻게 생성?

웹 브라우저가 원본 HTML을 읽어들인 후,
style을 입힌 후 대화형 페이지로 만들어 뷰 포트에 표시하기까지 과정을
"Critical Rendering Path"라고함.
이 과정은 대략 두 단계로 나눌 수 있다.
1. 브라우저는 읽어들인 문서를 파싱해 최종적으로 어떤 내용을 페이지에 랜더링할지 결정.
2. 브라우저는 해당 랜더링 수행.

첫번째 과정을 거치면 "랜더 트리" 생성
랜더 트리?
웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소로 구성.
브라우저는 랜더 트리를 생성하기 위해 다음과 같이 두 모델 필요.

• DOM - HTML 요소들의 구조화된 표현
• CSSOM(Cascading Style Sheets Object Model) - 요소들과 관련된 스타일 정보와 구조화된 표현

DOM(문서 객체 모델)

웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스.
-> JS같은 스크립트 언어가 쉽게 웹 페이지에 접근해 조작할 수 있게 연결시켜주는 역할.
-> 어떤 프로그래밍 언어에 의존하지 않는 독립적인 인터페이스.

DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법 제공.
문서 구조, 스타일, 내용 등 변경할 수 있다.

DOM은 nodes와 objects로 문서를 표현.
-> 웹 페이지를 스크립트 or 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할담당.
-> 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event들은 objects로 구성.

DOM은 동일한 문서를 표현, 저장, 조작하는 방법 제공.
웹 페이지의 객체지향표현이며, 자바스크립트와 같은 스크립팅 언어를 통해 DOM 수정 가능.

DOM은 HTML 문서를 계층적 구조와 정보로 표현,
이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조.
HTML DOM / HTML DOM Tree
트리 자료구조로 구축이 되어, HTML 문서는 최종적으로 하나의 최상위 노드(root 노드)에서 자식 노드를 가지며, 아래로만 뻗어나감.

Document node(문서 노드)

DOM Tree에서 최상위 루트 노드를 나타냄.
document 객체를 가리킴.
HTML 문서 전체를 나타내는 노드.

window 객체의 document property로 연결되어 window.document, doocument로 참조해 사용가능.
HTML 문서에 문서노드는 오직 1개만 존재 가능.

element node(요소 노드)

모든 HTML요소(body, h1, div...)
속성 노드를 가질 수 있는 유일한 노드
부모-자식 관계를 가지게 되어 계층적 구조 이룸.

attribute node(속성 노드)

HTML 요소의 속성.
요소 노드에 대한 정보를 가짐(ex. color....)
요소 노드와 연결

text node(텍스트 노드)

정보를 표현, 가장 마지막에 위치하는 자식노드.
리프노드라고 불리기도함.

JavaScript DOM

자바스크립트는 DOM을 조작할 수 있는 프로그래밍 언어 중 가장 유명한 언어.
자바스크립트는 가장 빠르고 간편하게 DOM으로 구조화된 웹 문서에 접근해 노드(웹 컨텐츠를 이루는 모든 기본 요소)들을 조작 가능.

자바스크립트를 이용해 HTML 문서에 없는 노드를 만들어 이어 붙여 웹 페이지에 렌더링되게 만드는 모든 과정이 동적으로 구현하는 것.
또한, 자바스크립트를 이용해 노드에 없는 노드를 만들어 이어 붙이는 것도 동적으로 구현 가능.

정적으로 생성되는 과정은 오로지 이미 HTML 파일에 적혀 있는 코드를 위에서부터 아래로 읽어내려가며 생성되는 과정만을 뜻함.
-> HTML 문서에 직접 태그로 작성하는 것 = 정적

DOM의 Datatype

DOM 객체의 구성 요소

property

DOM 객체의 멤버 변수. HTML 태그의 속성 반영

method

DOM 객체의 멤버 함수. HTML 태그 제어

collection

정보를 집합적으로 표현하는 일종의 배열.

event listener

HTML 태그에 작성된 이벤트 리스너(onclick, onchange...)들을 그대로 가짐.

style

style property를 통해 css style 시트에 접근 가능

DOM의 Datatype은 객체이기 때문에, property와 method를 가짐

document

member가 document type의 object를 리턴할 때, 이 object는 root document object 자체.

element

element는 DOM API의 member에 의해 return된 element 또는 element type의 node 의미

nodeList

element의 배열
nodeList의 Items은 index를 통해 접근 가능,

• list.item(1)
• list[1]
  -> 두 가지 방식 존재.

attribute

attribute가 member에 의해 리턴되는 것은 attribute에 대한 특별한 인터페이스를 노출하는 object reference.

namedNodeMap

array와 유사하지만, items은 name 또는 index에 의해 접근 가능.

DOM의 완전한 이해

DOM은 HTML이 아니다.

DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않음.
DOM이 원본 HTML 소스와 다를 수 있는 두가지 케이스 존재.
1. 작성된 HTML 문서가 유효하지 않을 때.
DOM은 유효한 HTML 문서의 인터페이스.
DOM을 생성하는 동안, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정.

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

DOM은 브라우저에 보이지 않음

브라우저 뷰 포트에 보이는 것은 랜더 트리로 DOM과 CSSOM의 조합.
랜더 트리는 오직 스크린에 그려지는 것으로 구성되어 DOM과 다름.
랜더 트리는 display:none은 포함하지 않음!!

DOM은 개발도구에서 보이지 않음

개발도구의 요소검사기는 DOM과 가까운 근사치 제공.
그러나 개발도구의 요소검사기는 DOM에 없는 추가적인 정보 포함.
Ex. css의 가사요소 -> ::before, ::after 선택자를 사용해 생성된 가상요소는 CSSOM과 렌더트리의 일부 구성.
DOM은 오직 원본 html 문서로부터 빌드, 요소에 적용되는 스타일을 포함하지 않음.

요약

DOM은 HTML 문서에 대한 인터페이스.
1. 뷰 포트에 무엇을 렌더링할지 결정하기 위해 사용
2. 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용
3. DOM은 원본 HTML 문서 형태와 비슷하지만
항상 유효한 HTML 형식
자바스크립트에 수정될 수 있는 동적모델
가상 요소를 포함 x
보이지않는 요소 포함 한다는 차이점 존재..

참고문헌
https://www.codestates.com/blog/content/dom-javascript
https://wit.nts-corp.com/2019/02/14/5522