HTML DOM 이란?(Document Object Model)

 크롤러를 개발하거나, 웹 프론트엔드 자바스크립트 개발 시 document라는 단어가 들어있는 api들을 보았을 것이다. 이때 document에 관련된 글이다.

 

 우리가 작성한 html, css 파일은 결국 각각의 파일로서 저장이 되어있는 상태이다. 그럼 이것을 결합해주는 방식은 어떻게 될까? 바로 파서들에 의해서 파싱 되고 이를 트리 형태를 기반으로 한 DOM이 되는 형식이다. 

 

html->파싱  ┐

                  ㅡㅡ> DOM -> 브라우저에 의해 화면에 표시

css->파싱    ┘

 

 위와 같이 간략하게 나타내는 것이 우리가 프론트엔드 개발을 한 후 화면에 보이는 절차이다. 우리는 DOM이라는 중간 모델을 거쳐서 화면에 표시되게 된다. 따라서 우리가 동적인 웹을 만들게 되면 javascript를 사용하게 되는데 이때, html 파일과 css파일을 수정하는 것이 아니라 DOM 부분을 변경하게 되는 것이다.

 따라서 javascript를 잘 사용하기 위해서는 DOM의 구조와 데이터타입, 어떻게 관리되는지 잘 알고 있어야 할 것이다. body태그에 div태그를 추가하는 방법, div태그에 "main"이라는 속성을 추가하는 방법을 알기 위해서는 DOM에서 제공하는 api를 알아야 한다. DOM이라는 트리가 어떻게 되어있는지 그려보고 우리가 원하는 트리로 변경하는 작업인 셈이다.

 

 mozilla에서 제공하는 글에 의하면 DOM과 js가 따로 발전되었다고 한다. 따라서 DOM과 js 두 개 모두 공부할 필요가 있다. DOM을 보면 웹을 만든 사람들은 머리가 좋다는 생각이 든다.

 

 DOM은 html 파일을 트리형태로 만들어 두었다고 생각하면 쉽다. 즉, 아래와 같은 트리 구조라고 이해하면 된다. 또한, 객체지향 방식으로 만들어져 있다. 따라서, DOM의 syntax를 통해 data type을 이해하고 사용할 수 있는 method를 이해하면 될 것이다.

 

html -head  - title

                 - link 

       -body  - p

                 - div

 

 

 

DOM 메뉴얼

https://dom.spec.whatwg.org/

DOM Standard

 

설명 사이트

https://developer.mozilla.org/ko/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core

W3C DOM Level 1 Core 사용하기