Murpin Tech'blog

What'is DOM? 본문

FrontEnd/개인공부

What'is DOM?

Murpin 2022. 4. 27. 01:57

오늘 공부해볼 것은 DOM이다.

DOM (Document Object Model)

: 직역하면 문서 객체 모델이다. 

MDN에서는 HTML, XML 문서의 프로그래밍 interface라고 설명한다.

내가 처음 개발을 시작할 때 이 개념의 중요한 점이라고 생각하지 않고 대충 DOM 트리, 엘리먼트 구조로만 알고 있었는데 웹을 공부하면서 조금은 자세하게 알 필요가 있다고 생각한다.

 

DOM을 모델이라고 하니 해석이 이상해진다. 그냥 모델로만 인식하는 것은 반만 정답인 것 같다.

WSC DOM의 개념을 확인하면

DOM은 문서(특히 HTML 및 XML 문서)에 액세스하고 조작하기 위한 API라고 해석하는 것이 좀 더 정확한 표현일 것 같다. 왜냐하면 DOM은 단순한 모델이 아닌 직접적으로 HTML 문서를 조작하는 기능들을 DOM이 갖고 있기 때문에 한국어의 개념에서 모델이란 단어로 확실한 표현하기에는 부족할 수 있다.

 

그리고 DOM 트리로 넘어가면 DOM은 앞에서 설명한 것처럼 하나의 document를 표현하는데

이 document는 프론트엔드 개발자 입장에서는 Html이 될 것이다.

예시로 html 파일을 DOM트리로 표현하는 것을 그림으로 보자.

<!DOCTYPE html>
<html class=first>
 <head>
 	<title>Murpin</title>
 </head>
 <body>
 	<div>he is FE developer</div>
 </body>
</html>

*DOM 트리 표현

Document

|_Doctype : html

|_Element: html class="first"

  |_Element: head

  |_#text: ↵ 

  |   |_Element: title

  |     |_#text: Murpin  |     |_#text: ↵

  |_#text: ↵

  |_Element: body

      |_#text: ↵

      |_Element: div

        |_#text: ↵

        |_#text: he is FE Devloper

            |_#text: ↵

~그림 예시 부족~ 그림은 그려서 넣자~

위와 같이 HTML을 태그를 기준으로 태그 노드 트리를 작성할 수 있다.

더보기

  |_#text: ↵ 이것은 왜 있는거죠? 라고 궁금하다면 아래글을 읽어보면 도움이 될 것 같다.
 전부의 프로그래밍 언어는 모르지만 언어를 공부해봤다면 줄과 공백은 글자나 숫자처럼 항상 유효한 문자로 취급된다는 것을 알고 있을 것이다.
그렇기에  ↵   텍스트 노드가 되고, DOM의 일부가 된다. 위 HTML 문서를 보면 <head>와 <title>사이에 새 줄과 약간의 공백이 있는 것을 볼 수 있는데, 이런 특수문자 역시 #text 노드가 된다.

하지만 텍스트 노드 생성엔 두 가지 예외가 존재한다.

  1. <head> 이전의 공백과 새 줄은 무시된다.
  2.  HTML 명세서에서 모든 콘텐츠는 body 안쪽에 있어야 한다고 했기에, </body> 뒤에 무언가를 넣더라도 그 콘텐츠는 자동으로 body 안쪽으로 옮겨지게 된다. 따라서 </body> 뒤엔 공백이 있을 수 없다.

두 예외를 제외하고서는 문서 내에 공백이 있다면 다른 문자와 마찬가지로 텍스트 노드가 된다. 그리고 공백을 지우면 텍스트 노드 또한 사라지게 된다.
(질문 : 그렇다면 웹에서 npm build를 진행하면 html 문서가 한줄로 되는 이유도 이러한 #text 노드 생성도 줄이기위한 용량 최적화인가?)

위 그림을 통해 알 수 있는 것은 DOM에 있는 모든 태그들은 하나의 객체로 존재하는 것이고 그에 대한 접근 하여 이를 조정하거나 하는 것을 DOM 조작이라고 생각하면 좋을 것 같다.

 

태그는 요소 노드(element node) (혹은 그냥 요소)이고, 트리 구조를 구성하는 하나의 노드가 되는 것이다. 

그림을 보면<html>은 루트 노드가 되고, <head>와 <body>는 루트 노드의 자식이 된다.

요소 내의 문자는 텍스트(text) 노드가 된다.

텍스트 노드(#text)는 문자열만 담게 되기에 자식 노드를 가질 수 없고, 트리의 끝에서 잎 노드(leaf node)가 된다.

위 그림에서 <title> 태그는 "Murpin"이라는 텍스트 노드를 자식으로 갖고 있는 것이다.

이렇게 가지 처럼 뻗어나가는 것이 마치 나무(Tree)와 비슷하기에 우리는 이를 DOM 트리라고 부른다.

 

참고문헌:  https://dom.spec.whatwg.org/#introduction-to-the-dom

 

DOM Standard

 

dom.spec.whatwg.org

https://ko.javascript.info/dom-nodes

 

DOM 트리

 

ko.javascript.info

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

'FrontEnd > 개인공부' 카테고리의 다른 글

Git(분산형 버전관리 시스템)이란?  (0) 2022.09.20
Web Storage란?  (0) 2022.09.06
웹 브라우저에서의 이벤트 루프와 비동기 이해 : 이벤트 큐(2)  (0) 2022.08.13
웹 브라우저에서의 이벤트 루프와 비동기 이해(1)  (0) 2022.07.10
'FrontEnd/개인공부' Related Articles more