DOM이란 무엇인가

오늘 javascript를 공부하려고 하는 직장 동료 한분이 나에게 이런 질문을 했다. 

'DOM이 뭐예요?'

순간 어떻게 설명을 해야할지 막혀서, 잘 대답해 드리지 못한 것 같아서 내가 알고 있는 DOM에 대해서 이렇게 글로 정리를 해 보았다.

DOM은 Document Object Model을 말한다. 

즉, 문서(HTML)를 객체로 모형화 한 것이다.

이렇게 말하니 더 어렵고 헷갈리게 느껴질수도 있을 것같은데 아래 HTML 구조와 DOM구조를 보라.

• HTML 구조
• DOM 구조
  
  DOM은 위와 같이 Javascript의 Object형식으로 표현되어진다.

 

HTML과 DOM은 위와 같이 다른 모습을 하고 있지만, 서로 같은 정보를 지니고 있다.

그리고 이 둘은 서로 상호작용한다. 

 

MDN문서를 보면 DOM에 대해 아래와 같이 설명하고 있다.

DOM 이란?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

쉽게 말하자면 DOM은 Javascript로 html을 조작하기 위해 존재한다는 것이다. 

그렇다고 해서 html을 직접 조작하는 것은 아니고, dom을 접근해 조작하므로써 html에 변화가 일어난다.

 

1. DOM 접근
   

   document.querySelector('title')​

2. DOM 조작
   

   document.querySelector('title').innerText = "제목"​

3. HTML 반영 (HTML 렌더링 이라고도 한다)

 

 

이 세 단계를 통해서 HTML을 조작 할 수 있다. 

 

DOM에는 위에서의 innerText 와 같이, HTML을 조작하기 위한 API(method 및 property)가 존재한다. 이 다양한 API를 사용해서 HTML 요소의 추가 삭제 등 다양한 조작이 가능하다. 

 

그러므로 DOM에 대해 이해했다면, DOM API를 다양하게 사용해보면서 Javascript를 공부하길 바란다.