DOM 이란?

지난번 Hoisting(호이스팅) 글에 이어서, 많이 들어봤지만 내가 대답하지 못할 내용을 찾아봤다.

가끔 듣는 '돔에 대해 알고 계신가요?' 라는 질문.

분명히 돔이란 말을 많이 듣긴 했는데 여태 제대로 공부를 해본적이 없다.

반성하며 이 기회에 짚고 넘어가고자 정리했다.

그냥 넣어본 돔..

DOM 이란?

MDN에서는 DOM을 아래와 같이 설명한다. 

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

 

응 뭐라고..? 뭔가 한글 해석은 난해하고 영어로 봐도 안읽힌다. 찾아보니 위키백과 설명이 좀 더 명쾌하게 다가왔다.

문서 객체 모델 (DOM; Document Object Model)은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다.

출처: 위키백과

위는 html 문서 내 DOM 계층의 예시이다.

DOM에는 문서 내의 내용들이 노드와 객체로 정의되어 있고, 문서와 상호작용 할 수 있는 API 들을 제공한다.

즉, 우리가 javascript 파일로 html 문서와 상호작용(값을 변경한다거나, 추가하거나, 지우거나 등등)할 수 있는건 전부 DOM 덕분이다.

(여태 한번도 의심하지 않고 그냥 html과 javascript가 바로 연결되는걸로 생각한 나 ㅠㅠ)

 

처음 딱 위 그림만 봤을땐, DOM은 html 파일과 같은건가? 라는 의문이 들었다.

하지만 그게 아니었다. 

html 파일은 단순 텍스트일 뿐이다. 결국 브라우저를 통해 DOM이 만들어져야 우리가 페이지를 제대로 볼 수 있다.

 

글 안의 글?!

설명을 보면서 알게된 게, 나는 여태 웹페이지에서 Inspect를 통해 나오는 Elements를 html이라고 혼자 착각하고 있었다.

html이 웹페이지의 기본 틀이고 그 위에 javascript와 css가 합쳐져서 이렇게 나온 모습이구나 하고 깊게 생각하질 않았다.

알고보니 이건 브라우저가 문서를 해석해 DOM을 만들어낸 결과였다.

 

 

읽은 글 중에 javascript-DOM-html의 관계를 사람-리모콘-TV 형태로 풀어 쓴 것도 있었다.

우리가 리모콘을 통해 TV 채널을 돌리는 것처럼, DOM은 javascript가 html을 조작할 수 있게 만들어준다고.

비록 트리구조에 대한 얘기는 없더라도 직관적인 비유라 좋았다.

DOM의 핵심은 html/xml 파일과 스크립트 파일 간 상호작용을 가능하게 해준다인 것 같다.

 

 

결론

내 결론은 위키피디아에 나온것과 거의 같은 말이다.

DOM은 XML, HTML 문서를 계층으로 표현하여 상호작용할 수 있도록 돕는 인터페이스입니다. 자바스크립트 파일을 통해 HTML 파일에 정의된 element들에 접근할 수 있는 것은 DOM이 HTML파일에 접근할 수 있는 API를 제공해주기 때문입니다.

 

 

 

p.s.

글이 쓰기 싫었지만 그래도 글또 참여한다고 마감 두 시간 전에 꾸역꾸역 들어왔다.

막상 주제를 정한 뒤 정보를 찾다보니 '이걸 내가 이해할 수 있을까. 지금이라도 주제를 바꿀까' 몇 번 생각했다. (하지만 너무 늦었지)

비록 깊이 이해하진 못했지만.. 억지로나마 완료를 누를 수 있어서 다행이다.

좀 더 시간이 남으면 접근 메소드 관련 코드나 가상돔 내용도 더 찾아볼 수 있었을텐데 이건 다음으로 미뤄야겠다.

---

< 참고한 글 >

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Introduction to the DOM - Web APIs | MDN

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

문서 객체 모델 - 위키백과, 우리 모두의 백과사전

https://www.w3schools.com/js/js_htmldom.asp

JavaScript HTML DOM

https://www.freecodecamp.org/news/dom-explained-everything-you-need-to-know-about-the-document-object-model/

The DOM Explained for Beginners – How the Document Object Model Works