DOM 소개 (그래서 DOM이 뭔데?)

들어가며

이 글은 이해가 안가는 부분에 대한 학습을 위해 정리한 글입니다. 그래서 조금더 쉬운말과 간략한 내용들 위주로만 작성하였으니 참고하시기 바랍니다.

또한 여러 문서를 참고하면서 최대한 틀리지 않으려고 노력했으나, 잘못된 내용이 있다면 지적해 주시기 바랍니다.

 

DOM (Document Object Model)

MDN에 따르면, DOM은 아래와 같다.

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

 

위 설명을 읽어도 돔이 그래서 도대체 뭐지? 한다면, 필자와 같은 증상을 겪는 것으로 보이니, 이글이 조금이라도 도움이 되었으면 좋겠다.

 

브라우저의 렌더링 과정

DOM에 대해 이해하기 전에 브라우저가 우리 눈에 웹페이지들을 보여주는 과정이 어떻게 이뤄지는지 간략하게 살펴보도록 하자.

출처: https://poiemaweb.com/js-browser

위 그림과 같이 서버에 리소스를 요청, 응답, 파싱, 렌더 트리 생성, 페인팅 등의 과정을 거쳐서 렌더링 되는데, 이런 구체적인 것은 나중에 다시 살펴보고 간략하게 설명하자면,

 1) 브라우저가 서버에 필요한 자료를 요청하고, 서버에서 HTML, CSS 등을 응답한다.

 2) 브라우저는 응답받은 텍스트 문서를 파싱(해석)한다.

    - 파싱: 프로그래밍 문법에 맞게 작성된 텍스트 문서를 컴퓨터가 이해할 수 있는 구조로 변환하는 과정

 3) 렌더링 수행

   - 렌더링: 브라우저에 시각적으로 출력하는 것

 

간단하게 외국인 디자이너에게 한국말로 된 요청사항이 적힌 문서와 필요한 자료들을 주면서 디자인 작업을 요청하고, 그 디자이너가 한국말로 된 문서를 번역해서 최종 작업물을 보내주었다고 생각하면 되겠다.

 

DOM 이란?

이 때, HTML문서를 파싱해서 브라우저가 이해할 수 있는 자료구조(객체)를 생성해서 메모리에 저장하는데, 이것이 바로 DOM이다. (HTML을 파싱한 결과물인 것)

모든 요소들을 객체로 만들고, 그 객체들을 트리 구조로 만든다. 아래 그림과 같이 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는다.

 

위의 디자이너 예시에서 한국말로 된 요청문서가 글자로만 되어있어서 디자이너가 이해하기 어렵기 때문에, 디자이너가 이해하기 쉽도록 도면형식의 구조로 만드는 것이라고 생각하면 될 것 같다.

출처: http://www.tcpschool.com/javascript/js_dom_concept

자바스크립트를 통해 DOM을 동적으로 변경할 수 있다. DOM은 이를 위한 객체를 제공하는데 이것을 DOM API(프로퍼티와 메소드를 가지고 있음)라고 한다. 

 

---

References

1) https://poiemaweb.com/js-browser

2) https://poiemaweb.com/js-dom

3) 자바스크립트 Deepdive, 이웅모, 2020, 위키북스

4) http://www.tcpschool.com/javascript/js_dom_concept

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

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