DOM?
DOM이란 Document Object Model로 HTML, XML 문서의 프로그래밍 interface이다.
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해준다.
ex) document.getElementById()웹 페이지는 일종의 문서인데, 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.
javascript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
Document와 window object는 DOM 프로그래밍에서 가장 자주 사용하는 object이다.
window object는 브라우저와 같다고 할 수 있으며 document object는 root document 자체라고 할 수 있다.
Web(브라우저)이 HTML을 해석하는 순서
- HTML 데이터를 파싱한다.
- 파싱한 결과로 DOM Tree 구조를 생성한다.
- 파싱 중 CSS 링크를 만나면 Style Roule에 의해 CSS 파일을 요청 받고 CSS 파일을 읽어 CSS Object Model을 생성한다.
- DOM Tree와 CSSOM을 이용해 Render Tree를 생성한다.
- Render Tree 구조와 각 노드들의 위치를 계산하여 브라우저 화면을 그린다.
가상 DOM?
DOM과 다른 가상에 만들어진 또 다른 DOM으로 DOM을 직접 수정하지 않고 간소화된 DOM을 따로 보관하여 실제 DOM에 적용하기 전에 바뀐 부분이 있는지 확인하여 수정을 하게 된다. (DOM은 실제로 존재하는 반면, 가상DOM은 메모리에 존재하는 추상적DOM이다.)