[공부] DOM (The Document Object Model) 및 관련 개념 정리

* 개인적인 공부 내용을 기록한 글입니다.

---

사담

뭔가를 '두루뭉술'하게 알고 있다는 사실 만큼 자신감을 깎는 것도 없을 것 같다.

들으면 대충 뭔지는 아는데... 일목요연하게 설명은 못하겠고... 결국 '제대로'는 모르고 있는 것이다.

이런 것들이 정말 많지만 하나씩 확실히 정리하다보면 거품 같았던 주변 지식에 조금씩 윤곽이 잡히는 것 같다.

 

설명

오늘은 DOM과 DOM 관련 개념들에 대해 의식의 흐름 순으로(..) 공부해본다.

---

DOM 관련 기초 개념

 

 

DOM의 사전적 정의

문서 객체 모델 (The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 인터페이스다.

* 인터페이스 : 상호 간의 소통을 위해 만들어진 물리적 매개체나 프로토콜

 

DOM의 종류

W3C DOM 표준은 다음의 세 가지 모델로 구분된다.

* W3C : World Wide Web Consortium

1. Core DOM : 모든 문서 타입을 위한 DOM 모델

2. HTML DOM : HTML 문서를 위한 DOM 모델

3. XML DOM : XML 문서를 위한 DOM 모델

 

HTML이란?

Hypertext Markup Language

 

XML이란?

eXtensible Markup Language = 확장 가능한 표시 언어

Markup Language의 다른 예로는 우리가 아는 언어인 HTML이 있다.

 

HTML vs XML

HTML은 이미 약속되어있는 태그만 사용이 가능하다. (ex. <h1>, <h2>...)

반면, XML은 이름 그대로 '확장 가능하다'는 차이점이 있다.

XML의 태그는 사용자가 임의로 만들어 사용할 수 있다.

XML은 어떠한 데이터를 설명하기 위해 임의로 만든 태그로 해당 데이터를 감싼다.

즉, 태그를 통해 데이터를 설명하는 것이다.

 

XML의 특징

1. 다목적 마크업 언어이다.

2. 다른 시스템끼리 다양한 종류의 데이터를 솝쉽게 교환할 수 있도록 해준다.

3. 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋다.

4. 데이터를 전달하고 저장하는 것만을 목적으로 한다.

5. 텍스트 데이터 형식의 언어로, 모든 XML 문서는 유니코드* 문자로만 이루어진다.

* 유니코드 : 숫자와 글자, 즉 키와 값이 1:1로 매핑된 형태의 코드

 

XML 데이터 예시

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<note>
  <date>
    <day>21</day>
    <month>11</month>
    <year>2021</year>
  </date>
  <tistory>
    <title>XML은 무엇인가</title>
    <writer>choco</writer>
  </tistory>
  <remark>
    <![CDATA[  CDATA부분에는 < > & " 등과 같은 문자를 그대로 표현할 수 있다  ]]>
  </remark>
 </note>

---

DOM (The Document Object Model)

 

 

DOM이란 정확히 뭘까?

DOM은 웹 페이지에 대한 인터페이스로, 문서 내의 모든 요소를 정의하고 다양한 프로그램들이 페이지의 컨텐츠, 구조 및 스타일을 읽고 조작할 수 있도록 API를 제공하는 일종의 객체 모델이다.

 

웹 페이지 빌드 과정에서의 DOM의 쓰임새

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 Critical Rendering Path라고 한다. 이 과정은 여러 단계로 나누어져 있지만, 이 단계들을 대략 두 단계로 나눌 수 있다.

1단계. 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정한다.

2단계. 브라우저는 해당 렌더링을 수행한다.

 

1단계를 거치면 Render Tree가 생성된다.

Render Tree는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다. 브라우저는 Render Tree를 생성하기 위해 다음의 두 모델을 필요로 한다.

1. DOM (The Document Object Model) : HTML 요소들의 구조화된 표현

2. CSSOM (Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현

 

DOM의 구조

DOM은 원본 HTML의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

DOM의 개체 구조는 Node Tree로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는, 통틀어 나무와 같은 구조로 이루어져 있기 때문이다.

이러한 DOM은 W3C의 표준 객체 모델이며, 예시는 다음과 같다.

 

Node란?

Tree 구조에서 Root Node를 포함한 모든 개개의 개체를 Node라고 표현한다. head, body, title, script, h1 등의 태그 뿐만 아니라 태그 안의 텍스트나 속성 등도 모두 Node에 속한다.

 

JavaScript & DOM

JavaScript는 DOM을 이용하여 다음과 같은 작업을 할 수 있다.

1. 새로운 HTML 요소나 속성을 추가할 수 있다.

2. 존재하는 HTML 요소나 속성을 제거할 수 있다.

3. HTML 문서의 모든 HTML 요소를 변경할 수 있다.

4. HTML 문서의 모든 HTML 속성을 변경할 수 있다.

5. HTML 문서의 모든 CSS 스타일을 변경할 수 있다.

6. HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.

7. HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.

 

JavaScript vs DOM

JavaScript는 브라우저가 읽고 어떤 작업을 수행할 수 있는 언어이고,

DOM은 이 작업이 이루어지는 장소를 말한다.

사실 우리가 'JS로 하는 것'이라고 생각하는 것은 정확히는 'DOM API'다.

DOM은 브라우저에 의해 기록되는 모든 것이고, JS는 이를 조작할 수 있는 언어일 뿐이다.

따라서 JS는 브라우저 밖의 DOM API가 없는 환경에서도 동작할 수 있다. (ex. Node.js 등)

 

JavaScript로 문서 객체를 생성한다는 것은 어떤 의미일까?

문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있다.

1. 정적 생성 : 브라우저가 HTML에 적혀져 있는 태그를 읽고 있는 그대로 문서 객체를 생성하는 것.

2. 동적 생성 : 원본 HTML에 없는 문서 객체를 JS를 이용하여 생성하는 것.

따라서 JS로 문서 객체를 생성하는 것은 동적 생성에 해당한다.

---

DOM이 아닌 것들

 

 

1. 내가 작성한 HTML 코드가 DOM이다?

⇒ 아니다! 하지만 내가 작성한 코드가 브라우저에 의해 파싱되면 DOM이 된다.

 

2. 페이지 View Source가 DOM이다?

⇒ 아니다! View Source는 해당 페이지를 이루고 있는 HTML을 보여줄 뿐이며, 내가 작성한 HTML과 같다. 그러나, 만약 코드 작성 시 백엔드 언어를 사용했을 시에는 컴파일된 결과가 출력된다. 예를 들면, 코드에 <?=$res[0]?> 라고 작성했더라도 View Source에는 컴파일된 결과인 해당 데이터 값이 나타난다. 혹은 작성된 코드에 대해 빌드 과정을 거친 다음 웹 사이트에 배포되는 경우에는, HTML 코드가 압축되거나 변형되었을 수도 있다.

 

3. DevTools에서 보이는 코드가 DOM이다?

⇒ 유사하다! 브라우저에서 지원하는 개발자 도구는 DOM과 가장 가까운 근사치를 제공해준다. 이 도구에서 시각적으로 표현한 DOM이 나의 HTML 코드와 동일할 수는 있지만, 대개는 달라지게 되며 DevTools에는 이러한 변경 사항이 적용되어 표시된다.

⇒ 그러나 DevTools에서 보이는 코드가 DOM과 완전히 같지는 않다. DOM에는 없더라도, 우리에게 정보를 주기 위해 추가적으로 포함하는 것들이 있기 때문이다. (ex. CSS의 pseudo element 등)

---

DOM이 HTML과 달라지는 경우

 

 

1. 작성된 HTML이 유효하지 않은 경우

⇒ 내가 작성한 HTML에 실수가 있는 경우, 브라우저는 유효하지 않은 HTML 코드를 올바르게 교정해준다.

 

2. Javascript로 DOM을 조작하는 경우

⇒ 예시는 다음과 같다.

 

[1] 다음의 HTML 코드를 작성한다.

<div id="container"></div>

[2] 다음의 JS를 작성하여 container에 텍스트를 추가한다.

<script>
  var container = document.getElementById("container");
  container.innerHTML = "New Content!";
</script>

[3] DevTools를 확인하면 DOM은 다음과 같이 나타난다.

<div id="container">New Content!</div>

따라서 DOM은 원본 HTML 혹은 View Source와는 다르다.

 

이외. Ajax and Templating

⇒ Ajax를 통해 어딘가에서 컨텐츠를 가져와서 현재 페이지에 넣거나, 클라이언트 사이드 템플리팅을 사용하는 경우에도 원본 HTML과는 달라진다.

---

참고 포스팅

https://norux.me/31
https://annajang.tistory.com/43
https://mommoo.tistory.com/17
https://wit.nts-corp.com/2019/02/14/5522
https://m.blog.naver.com/magnking/220972680805
https://velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80