DOM이란?

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

자바스크립트는 document라는 전역객체를 통해 접근할 수 있다.Javascript의 document객체는 DOM 구조를 접근하는 관문이며, document 객체는 html문서를 나타낸다고 말할 수 있다.

DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
DOM은 웹페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

DOM은 프로그래밍 언어는 아니지만 없었다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element(전체문서, 문서안의 테이블, tableheader, table cell안의 텍스트)는 문서를 위한 document object model의 한부분이다.때문에, 이러한 요소들을 DOM과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.

API(web or XML page)=DOM+JS(scripting language)

DOM은 프로그래밍 언어와 독립적으로 디자인되었다.때문에 문서의 구조적 표현은 단일 API를 통해 사용가능하다. 이문서에서는 자바스크립트를 주로 사용하였지만, DOM의 구현은 어떠한 언어에서도 가능하다.

document은 html 문서라고 볼 수 있다.
브라우저를 공장으로보면,
html 문서는 공장에 보내는 주문서이다.
그 웹페이지에는 구조가 설계도 처럼 표현되어있다.브라우저 공장에서 실제 제품으로 제작한다는 것이다.
html 주문서에 작성한 그 전체 구조에 맞춰서 이 제품들이 배치되고,이것들에 추가적으로 명령을 보내서 속성이나 디자인, 배치들을 조작할 수 있도록 된 상태 즉, html이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력받는 등 기능들을 수행할 객체들로 실체화 된 형태라고 보면 된다.

DOM은 자바스크립트를 사용해서 명령을 받을 수 있고 실제로 그렇게 사용되고는 있지만 DOM은 특정언어에 종속되지는 않는다. 자바스크립트를 통해 제어가능한 대상이다.

라이브러리를 가지고 있으면 DOM 조작이 가능하다. 이는 DOM이 API를 가지고 있기 때문이다.

DOM안에는 각종 node들이 트리구조로 들어있다.
html 문서들이 헤드,바디 그안에

<div><ul><li></li></ul></div>

등등 요소들이 다른 0에서 n개의 요소들을 포함하는 식이다.그 관계도가 트리구조로 보인다.
DOM의 모든 요소들, html,div,radio,table등 이것들은 모두 node로 부터 상속받는다. 그냥 html 요소들은 다 node라고 이해하는 게 편하다.

node 기능
parentNode, cloneNode, appendChild 등 이런것들이 다 사실 node의 기능들이다. 그리고 이 node는 또 EventTarget으로부터 상속받기 때문에 즉 node는 클릭 등의 이벤트가 가해지느 EventTarget이기 때문에 이 요소들은 모두 addEventListener등의 기능 또한 갖고 있다.

결국 이런 API로 구성되어있기때문에 mdn에서는 DOM을 'html이나 xml 문서를 나타내는 API라고 한다.

가상 DOM(virtual DOM)?

DOM의 구조만 간결히 흉내낸 자바스크립트 객체이다. 실제 DOM은 이것저것 든게 많고 무거우니까 그것들을 간략한 자바스크립트 오브젝트로 바꾼 다음에 시뮬레이션을 돌려가지고 가장 경제적으로 dom에 변화를 가하는 방식을 찾아낸다. 미니어처를 우선 출력하는 시뮬레이션을 한다음, 차이가 생기는 부분만 파악한 다음에, 이걸 diffing이라고 한다. 그부분만 실제 DOM에 반영하는 것이다.

react나 vue는 라이브러리 또는 프레임워크 방식이다. react로 만든 사이트들은 react의 기능들을 담은 자바스크립트 파일들을 사용해서 동작한다. 사용자가 작성한 react 전용 코드를 브라우저가 가상 돔으로 해석해서 메모리에서 먼저 구현한 다음 최종적으로 실제 DOM에 적용을 하는 것이다.