DOM (Document Object Model)

Document Object Model, DOM, 돔, 문서 객체모델

브라우저 인터넷창의 개발자 도구의 HTML에서는 CSS를 인식하고 스크립트도 인식한다.
확장자가 다른데 왜 될까? 한글파일은 워드에서 제대로 인식이 안되는데....

그 이유는 DOM때문이라고 한다. 

Document Object Model에서의 Document, 문서는 HTML을 말한다. 
(웹 개발에서 Document는 HTML을 말하는 거라고 생각하면 된다)

Object 는 객체는 자바스크립트나 자바에서 많이 나오는 자료형중의 하나.....
HTML을 하나의 객체로 만들어서 자바스크립트도 이해할 수 있게 만든다...

DOM은 브라우저에 내장되어 있는 API이다.

 

---

 

HTML, 또는 XML 페이지의 구조와 요소들을 제어할 수 있도록 제공하는 프로그래밍 인터페이스,
또는 구조화된 데이터를 말한다.

문서 객체 모델은 객체지향 모델로써 구조화된 문서를 표현하는 형식이다. 
DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.
DOM은 또한 W3C가 표준화한 여러 개의 API의 기반이 된다.

DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다.
DOM은 동적으로 문서의 내용 , 구조, 스타일에 접근하고 변경하는 수단이었다.

DOM은 문서의 기반이 되는 데이터 구조에 제한을 두지 않는다.

잘 구조화된 문서는 DOM을 사용하여 트리구조를 얻어낼 수 있다.
대부분의 xml 해석기는 트리 구조의 이용에 대응해 개발되었다.

이같은 구현에서는 문서의 전체 내용이 해석되어 메모리에 저장되어야 한다. 때문에 DOM은 문서 요소가 임의적으로 접근되고 변경할 수 있어야 하는 응용프로그램에 가장 적합하다.

한 번 해석시 단 한번의 선택적 읽기/쓰기가 이루어지는 xml 기반 응용 프로그램에서 DOM은 메모리에 상당한 부하를 가져온다.

---

자바스크립트는 이 프로그래밍 인터페이스(API)인 DOM에 접근할 수 있으며,
DOM 생성 후 화면에 웹페이지가 표시되기 전에 DOM을 제어할 수도 있다.

웹 브라우저로 웹사이트의 특정 페이지에 접속할 경우 웹 브라우저는 HTML 문서를 읽는다.
그리고 CSS와 여러가지 컨텐츠 파일도 함께 읽는다.
최종적으로 HTML, CSS 그리고 컨텐츠 파일들을 조합해 웹 페이지를 브라우저 화면에 표시한다.

웹 브라우저는 이과정을 2단계로 나누어서 실행한다.

먼저 HTML 파일을 일겅 문서의 구조를 파악하고, 트리 형태로 된 데이터 구조를 만든다. 이것이 DOM 이다.
DOM이 일단 완성되고 나면, 자바스크립트로 DOM을 제어할 수 있게 된다.

웹 브라우저가 웹 페이지를 화면에 표시하는 단계로 넘어가기 전에 자바스크립트가 DOM을 제어 할수 있다.
DOM 제어가 끝나면 웹 브라우저는 DOM 구조를 기반으로 웹 브라우저 화면에 웹페이지를 그리는 과정을 진핸한다.
이 그리는 과정을 렌더링(Rendering)이라고 한다.

렌더링에는 미리 작성한 CSS의 화면 배치와 속성에 대한정보를 사용한다.
이 과정에서 웹 브라우저는 DOM과 마판가지로 CSS를 읽어 CSSOM(Cascading Style Sheet Object Model)을 생성한다.
CSSOM은 CSS를 구조화 된 데이터 형태로 생성한 것이다.

DOM과 CSSOM을 조합해 화면에 펴시할 최종 구조를 만든다.
이것이 렌터 트리(Render Tree)다.

렌더트리를 기초로 화면에 HTML페이지가 그려진다.
배치가 되면서 컨텐츠 파일들 또한 비동기로 읽어서 HTML 페이지의 적절한 위치에 배치를 한다.

렌더링과정은 전적으로 웹 브라우저의 몫이다.
DOM의 구조는 표준으로 정햐져 있기 때문에 모두 같은 구조를 가지지만 
DOM을 웹 브라우저 화면에 어떻게 표시할 것이냐는 웹 브라우저 고유의 방식을 따른다.

여기서 호환성 문제가 발생한다.