DOM 이해 하기

Javascript

DOM 이해 하기

memeseo 2022. 1. 13. 07:18

🔎 DOM(Document Object Model) ?

: XML과 HTML 문서에 접근하기 위한 인터페이스.

Web API로 브라우저 웹 문서 조작할 수 있음.

🔎 Web API?

API (web or XML page) = DOM + JS (scripting language)

예시)

const contentBox = document.querySelector('.contentBox');
document.style.backgroundColor = 'red';
const innerHeight = document.innerHeight;

DOM의 노드들 중에서 특정 노드를 선택하고, 선택한 노드의 색을 변경하거나 viewport의 높이를 찾는 등 DOM을 조작하는 데 사용하는 스트립트 메서드들을 Web API라고 한다. 이런 메서드들은 window 최상위 객체에 담겨져 있다.

🔎 DOM의 개체 구조

: DOM은 원본 HTML 문서의 객체 기반 표현 방식이며 개체 구조는 노드 트리 (하나의 부모 줄기가 여러개의 자식 나뭇가지, 나뭇잎들을 가질 수 있는 나무와 같은 구조)로 표현된다.

예제)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> My first web page </title>
  </head>
  <body>
    <h1> Hello, world! </h1>
    <p> How are you? </p>
  </body>
</html>

위 문서는 아래와 같은 노드 트리로 표현 된다.

! DOM이 HTML 문서로부터 생성되지만 같은 개념은 아님.

🔎 브라우저 렌더링 흐름

*webkit 렌더링 엔진 기준

1. 브라우저가 서버에서 HTML과 정적 파일을 받아온다.

2. 렌더링 엔진이 가져온 HTML과 정적 파일을 파싱한다.

3. 렌더링 엔진이 파싱한 후에는 HTML과 정적 파일 각자를 DOM Tree와 CSSOM Tree로 만든다.

4. 렌더링 엔진이 Attachment 한 후, Render Tree를 만든다.

5. Layout은 Render Tree의 요소들에 입력된 style rule대로 브라우저의 viewport내에 그려질 요소의 크기와 위치 그리고 배치를 계산한다. *viewport : 그래픽이 표시되는 브라우저 영역

6. Layout 작업이 끝난 Render Tree가 렌더링 엔진에 의해 브라우저 화면에 그려진다.

✔ 사용자가 요소의 스타일에 영향을 주는 액션이나 이벤트를 발생시켰을 경우

-> Layout과 Paint 작업 실행 후 브라우저에 보이게 됨.

✔ 사용자가 데이터를 변경시키는 작업이나 요소를 추가하는 작업을 발생시킨 경우

-> DOM Tree부터 다시 그림.

결론

1. HTML을 작성하면 단순한 언어일 뿐이고 브라우저의 해석을 거쳐 객체로 변환된 걸 DOM이라고 한다.

(웹 사이트에서 F12 누른 뒤 Elements탭에 가면 나오는 코드들이 DOM)

2. HTML과 DOM은 다른 개념이다.

참고

https://d2.naver.com/helloworld/59361

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko