자바스크립트 문서 객체 모델 DOM (Document Object Model)

Achivement Goals

 

✅  DOM의 개념을 이해할 수 있다.

✅  DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.

✅  HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.

 

 

📌  웹 페이지는 어떻게 만들어지는가?

 

웹 브라우저는 원본 HTML문서를 읽고, Style을 입히고, 대화형 페이지로 만들고, 뷰포트에 표시하는 등 해석 과정을 거친다.

이렇게 해석하는 과정을 "Critical Rendering Path"라고 한다.

 

 

🏁  Critical Rendering Path

 

 

 

 

 

 

 

 

 

 

Critical Rendering Path

01  Constructing the DOM Tree

02  Constructing the CSSOM Tree

03  Running JavaScript

04  Creating the Render Tree

05  Generating the Layout

06  Painting

 

 

 

CSS는 "render blocking resource" 이고, JavaScript는 "parser blocking resource"이기 때문에

해당 파일을 실행하는 도중에는 다른 파일은 읽어들일 수 없다.

HTML은 이와 반대다. 콘텐츠를 페이지에 나타내기 위해 전체 문서를 로드할 필요가 없다 !

 

 

01  Constructing the DOM Tree : HTML 요소들을 구조화 해 tree를 만든다

02  Constructing the CSSOM Tree : HTML 요소들과 연관된 CSS 정보를 구조화 해 tree를 만든다

03  Running JavaScript : 자바스크립트 파일이 실행된다

04  Creating the Render Tree : DOM과 CSSOM이 조합된 tree이다

      최종적으로 렌더링될 내용을 나타내는 트리인데, 보이는 콘텐츠만 캡쳐한다.

      즉, display: none과 같이 css로 숨겨진 요소는 트리에 포함하지 않는다.  -->  여기서 생각지도 못한 상황이 발생하기도 ^!^

05  Generating the Layout : HTML의 meta viewport 태그를 기반으로 레이아웃을 생성한다

06  Painting : 문서에 pixel을 입힌다

 

 

 

🏁  진행중인 Critical Rendering Path는 DevTools에서 검사할 수 있다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Critical Rendering Path

01  GET request sent for HTML

02  Begin parding of HTML&DOM

      Send GET request for CSS&JS

03  CSSOM created for CSS

04  Evaluate JS

05  Generate Layout based on vp

06  Paint pixels on document

 

 

 

 

📌  DOM(Document Object Model)?

 

HTML의 요소들이 내가 원하는 기능을 수행할 객체들로 실체화되는 과정과 결과를 DOM이라고 한다.

다양한 브라우저들을 공장이라고 치고, 우리가 설계한 HTML은 주문서라고 했을 때,

이 공장을 통해 HTML의 다양한 요소들이 해당 브라우저에서 "실체"로 제작된다고 생각하면 이해가 쉬우려나 ?

 

DOM은 특정 언어에 종속되지 않는다. 흔히 자바스크립트에서 많이 쓰일뿐, 자유로운 아이다.

어떤 프로그래밍 언어든 라이브러리만 갖추고 있다면, 이 DOM을 조작할 수 있다.

DOM이 자체적으로 API를 가지고 있기 때문이다 ~!~! 

그래서 MDN에서는 XML이나 HTML문서를 나타내는 API라고 정의하기도 한다.

 

DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects이다. 이 objects로 문서를 표현하는거다.

DOM은 동일한 문서를, 표현하고, 저장하고, 조작하는 방법을 제공한다.

DOM은 웹 페이지의 객체 지향 표현이며 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

 

 

 

 

📌  그렇다면, DOM은 왜 탄생하게 되었는가 ?

 

이전의 수많은 브라우저들은 HTML을 읽는 법이 제각각 달랐다.

각 브라우저마다 설정해줘야하는 속성들이 달랐고, 이는 개발자들을 힘들게 했다.

이 문제를 해결하기 위해 여러 뛰어난 웹 개발자들이 모여 HTML을 철저히 분석했고,   -->  3WC

이 내용을 바탕으로 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들어 냈다.  -->  DOM

즉, 이전의 브라우저마다 다른, 정리되지 않았던 "HTML 읽는 법"을 정리한 것이다.