DOM tree & CSS OM

박세진·2022년 9월 1일

DOM tree

DOM

원래 의미에서 "The DOM"은 문서(특히, HTML과 XML 문서)에서 접근하고 조작하기 위한 API라고 한다.
DOM(Document Object Model)은 문서 객체 모델로, 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다.
DOM에 의하면 모든 HTML 태그는 객체이고, 태그 안에 Text도 객체이다. DOM은 JavaScript를 통해서 동적으로 변경할 수 있고, DOM에 접근하고 조작하는 프로퍼티와 메소드의 집합이 DOM API이다.

DOM tree

DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 뜻한다.
객체를 트리 구조로 표현하기 때문에 DOM tree 라고 부른다.

문서 노드(document node) : DOM의 진입점(시작점)으로 트리의 최상위에 존재한다.
요소 노드(element node) : 태그, HTML 요소
어트리뷰트 노드(attribute node) : 요소의 자식이 아닌 요소의 일부로 표현된다. 그래서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정⭕️
텍스트 노드(text node) : 요소 내의 문자열. 자식 노드를 가질 수 ❌, 트리의 끝에서 잎 노드가 된다.
주석 노드(comment node)

<!DOCTYPE HTML>
<html>
  <head>
    <title>DOM tree 이해하기</title>
  </head>
  <body>
    <p>크리스마스에는 DOM tree</p>
  </body>
</html>

이렇게 HTML 문서가 있을 경우에 DOM tree가 어떻게 구조화 되었는지 볼 수 있다. DOM tree 실시간으로 보기

- DOCTYPE: html
- HTML
	- HEAD
    	-#text
        -TITLE
        	-#text : DOM tree 이해하기
        -#text
    - #text
    - BODY
    	-#text
       	-P
        	-#text: 크리스마스에는 DOM tree
        -#text

그리고 이해해보기 위해서 한번 그려보았다.(태블릿 pc가 없기 때문에 노트에 그려봄)

엔터와 공백은 text로 취급이 되기 때문에 텍스트 노드가 된다.
예외적인 경우가 존재하는데, <head> 이전의 공백과 엔터는 무시! </body> 뒤에 뭘 써도 <body> 안으로 옮겨지기 때문에 뒤에 공백이 있을 수 없음!

DOM 생성과정에서 자동교정

html, body 태그가 없는 HTML 문서를 브라우저가 DOM 생성과정에서 자동으로 교정을 해준다.

<!-- html 파일에서 이렇게 생성을 한다면? -->
자동으로 교정을 해준다고?

DOM tree에서는 이렇게 나타난다

HTML
	-HEAD
    -BODY
    	-#text: 자동으로 교정을 해준다고?

닫는 태그가 없는 에러도 자동으로 채워준다.

<!doctype html>
<html>
  <head>
  </head>
  <body>
	<p> DOM tree
	<li> 리스트1
	<li> 리스트2
  </body>
</html>

-DOCTYPE: html
-HTML
	-HEAD
    	-#text
    -#text
    -BODY 
    	-#text
        - p
        	-#text: DOM tree
        -li
        	-#text: 리스트1
        -li
        	-#text: 리스트2

주석 노드(comment node)

주석 노드(comment node)는 HTML 안의 모든 것은 반드시 DOM tree에 추가되어야 한다는 규칙 때문에 추가되었다.

<html>
  <head>
  </head>
  <body>
    <!-- 주석 처리 -->
    주석도 가지라고?
  </body>
</html>

-HTML
	-HEAD
    	-#text
    -#text
    -BODY
    	-#text
        -#comment: 주석처리
        -#text: 주석도 가지라고?

CSS

CSS OM

브라우저의 렌더링 엔진은 HTML 문서를 처음부터 순차적으로 파싱하여 DOM을 생성하다가, CSS를 로드하는 link, style 태그를 만나면 DOM 생성을 일시 중단한다.
CSS도 HTML과 동일한 파싱과정을 거치며 해석하여 CSSOM을 생성한다.

body {
	font-size: 24px;
}

ul {
	list-style: none;
}

		<body> --> font-size: 24px
         <ul> --> font-size: 24px(상속)
         	  --> list-style: none
      <li>   <li>
 -->font-size: 24px(상속)
 -->list-style: none)

렌더트리

HTML과 CSS를 파싱하여 DOM tree와 CSSOM이 생성되고, 렌더링을 위해 렌더 트리로 결합된다.
렌더 트리(render tree)는 렌더링을 위한 트리구조의 자료이다.
렌더트리는 브라우저 화면에 렌더링되는 노드만으로 구성된다.

렌더트리에 포함되지 않는 것들!
<meta>
<script>
display: none;

완성된 렌더 트리는 각 HTML 요소의 레이아웃을 계산하는데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.
브라우저의 렌더링 과정은 반복해서 실행될 수 있으며, 리렌더링은 비용이 많이 드는 작업이다.
그렇기 때문에 이러한 점을 고려할 필요가 있다.

참고 및 출처

박세진

경험한 것을 기록

이전 포스트

[스터디 1차 과제] - 웹사이트 클론코딩

다음 포스트

DOM tree & CSS OM

DOM tree

DOM

DOM tree

DOM 생성과정에서 자동교정

주석 노드(comment node)

CSS

CSS OM

렌더트리

[스터디 1차 과제] - 웹사이트 클론코딩

브라우저의 동작 방식

0개의 댓글