티스토리 뷰

HTML & CSS

DOM이란 무엇인가

U_pic 2022. 2. 22. 13:47

DOM은 Document Object Model로 웹 페이지에 대한 인터페이스를 말한다.

DOM은 페이지에 대한 API로 DOM을 통해 페이지의 구조나 내용을 읽고, 조작이 가능하다.

 

웹 페이지 구축 과정

웹페이지를 구축하는 단계는 기준에따라 여러 단계로 분리가능하다.

하지만 주요 랜더링 경로 단계를 이해함에 있어는 크게 두가지 단계로 나뉘어진다.

첫번째, 브라우저가 html문서를 분석하여 최종적으로 랜더링할 내용을 결정하는 단계,

두번째, 브라우자게 랜더링을 수행하는 단계

 

첫번째 단계에서 나오는 산출물이 우리가 흔히 들어본 "렌더 트리"다.

렌더 트리는 렌더링에 필요한 내용(HTML) 과 스타일(CSS)이다.

자세히 말하면 HTML을 구문 분석한 DOM 과 CSS를 분석한 CSSOM이다.

 

DOM이 만들어지는 과정

DOM은 HTML소스를 객체기반으로 표현해놓은 것이다.

본질적으로 HTML문서의 내용을 프로그램 내에서 다양하게 사용할 수 있도록 구조와 내용을 객체 모델로 변환시켜 놓은 것이다.

 

DOM의 내부 구조는 '노드 트리'로 표현할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>What is DOM?</title>
</head>
<body>
  <h1>DOM</h1>
</body>
</html>

이러한 html문서에서 문서를 다음과 같은 노드 트리로 바꾸어 표현할 수 있다.

따라서, DOM은 html소스를 프로그램에서 사용하기위해 html과 css를 구문분석하여 객체 모델로 변환시켜놓은 것이라고 정리할 수 있겠다.

 

DOM의 유의점

1. DOM은 HTML 문서와 정확하게 동일하지 않다.

  •  HTML이 유효하지 않을 때
    <!DOCTYPE html>
<html lang="en">
	What is DOM?
</html>​
    다음과 같이 기본적인 HTML 구조를 충족하지 못하는 소스코드가 있다.
    이 경우의 DOM 트리를 보면 우리가 추가하지 않았지만 스스로 HEADER, BODY 태그를 트리에 포함시킨다.
  • JavaScript로 DOM을 수정한 경우
    JS로는 DOM 내부의 노드를 CRUD할 수 있다.
    하지만 이것이 DOM을 조작하는 것은 맞지만 html 소스파일 자체를 업데이트 한다고 할 수는 없다.

2. DOM은 브라우저에서 볼 수 있는 것이 아니다.

우리가 보는 화면은 DOM 과 CSSOM이 조합된 랜더 트리이다.

 

DOM에서는 html 문서에 대한 구문 분석을 하기 때문에 화면에서는 숨겨진 요소들도 다 포함 되어있다.

랜더 트리에서는 CSS의 스타일이 적용되어 화면에 나오는 요소들을 가지고 있기 떄문에  랜더 트리와 DOM이 가지고 있는 노드는 다를 수 있다.

그래서 DOM을 직접 브라우저에서 보는 것은 아니다.

 

3. DevTools에서 제공하는 Elements는 DOM이 아니다.

DevTools의 Elements는 html의 소스코드를 볼 수 있다 하지만 이 것이 DOM과 매우 유사하긴하지만 DOM은 아니다.

가장 좋은 예로는 CSS를 통해 부여하는 ::after와 ::before이다.

CSS를 통해 랜더링 트리의 일부분을 구성하긴하지만 DOM에게 포함되는 부분이 아니다.

그래서 JS로는 이부분을 컨트롤 할 수는 없다 (why? DOM이 아니니까)

 

Elements에서는 이러한 부분까지 모두 포함하고 있기 때문에 DOM과는 비슷하지만 다르다.

 

 

 

 

 

※ 본 내용은 아래 Reference를 참고하여 작성해보았습니다.

# Reference

 

bitsofcode

Articles on front-end development. Written by Ire Aderinokun, Frontend Developer and UI Designer

bitsofco.de

 

'HTML & CSS' 카테고리의 다른 글

Bundling과 웹팩(Webpack)  (0) 2022.02.23
Element 와 Node  (0) 2022.02.22
textContent / innerText / innerHTML  (0) 2022.02.22
[CSS] Flex와 Grid (feat. float)  (0) 2022.01.25
CSS 호환성  (1) 2021.09.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함