Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Contents

DOM

DOM(Document Object Model)은 플랫폼과 언어 중립적으로 구조화된 문서를 표현하고, 접근하기 위해서 개발한 W3C의 공식 표준이다. 처음에는 HTML로 표현된 문서에 접근하기 위해서 개발됐으며, 이후 XHTML, XML 문서들을 접근/재현하기 위한 용도로 확장됐다. 잘 구조화된 DOM 문서는 DOM tree 형태로 표현할 수 있는데, 이 tree에 접근하는 것으로 문서의 모든 객체에 접근할 수 있다.

DOM의 역사는 1990년대 초반에 진행됐던 넷스케이프(Netscape Navigator)와 마이크로 소프트사의 IE(인터넷 익스플로어)사이에 "브라우저 전쟁(Browser war)"와 밀접한 관련이 있다. 이들 브라우저 전쟁의 최전선에 있던 것들이 웹 브라우저의 레이아웃 엔진으로 사용했던 JavaScript와 JScript였고, 이들 스크립트 엔진이 DOM을 주 API로 사용했던거다.

Legacy DOM

자바스크립트는 Netscape communications이 1996년 발표한 넷스케이프 2.0에 포함됐다. 넷스케이프와 경쟁관계에 있던 마이크로 소프트는 자바스크립트를 나름대로 포팅한 JScript라는 이름의 또다른 스크립트 언어를 이듬해 IE 3.0과 함께 배포한다. 웹 개발자는 자바스크립트와 JScript를 이용해서 클라이언트와 상호작용하는 웹 페이지를 만들 수 있게됐다.

웹 페이지는 HTML 문서형식이었기 때문에, 유저와 상호작용은 결국 유저가 문서객체를 다루면서 만들어진 이벤트를 감지하고 문서를 수정하는 방식으로 이루어졌다. 이때 문서와의 상호작용을 위해서 DOM 레벨 0 혹은 레거시 DOM이 만들어졌다.

Legacy DOM은 접근할 수 있는 앨리먼트에 제한이 있다. Form, link, image 앨리먼트들은 root document object로 시작하는 계층적 이름을 통해서만 접근이 하다.

Intermediate DOM

1997년 넷스케이프와 IE 4.0부터 DHTML을 추가적으로 지원하기 시작했다. DHTML은 Legacy DOM을 확장, 읽은 HTML 문서를 변경하는 기능을 가지고 있었다. 이후 넷스케이프는 intermediate DOM의 호환을 포기했으며, IE는 하위 호환성을 보장하는 수준으로만 유지하고 있다.

표준화

JScript는 JavaScript를 기반으로 하고 있으므로, 큰 틀에서의 호환은 유지하고 있었으나 역시 호환에 문제가 있었다. 하여 1997년 ECMAScript 표준안을 발표, Javascript든 JScript든 모두 ECMAScript를 따르도록 하는 것으로 호환성 문제를 해결했다. ECMAScript는 (어도비 플래시의) 액션스크립트에서도 사용하고 있다.

ECMAScript이 표준으로 안착하면서 DOM에 대한 표준화도 진행한다. 1998년 W3C는 "DOM Level 1"이라고 알려진 initial DOM 표준을 발표한다. 같은해 IE 5.0은 DOM level 1에 대한 제한적인 지원을 시작한다. DOM level 1은 문서의 일부분을 변경하는 기능과 함께 HTML과 XML에 문서에 대한 완전한 모델을 제공한다.

2000년에 getElementByID, XML Namespace, CSS를 지원하는 DOM level 2가 발표된다.

2004년에 XPath, 키보드 event handling, serializing document as XML을 추가적으로 지원하는 DOM level 3가 발표된다. DOM level 3는 현재(2014년)까지 표준으로 사용하고 있다.

DOM level4는 지금 개발중인데, 2012년 12월 draft version 6이 발표됐다.

웹 브라우저와 DOM

모든 웹 브라우저는 DOM과 비슷한 방식으로 HTML 문서를 렌더링한다. 브라우저의 렌더링 엔진은 HTML 문서를 파싱해서, 문서의 모든 노드를 tree 형태로 구성한다. 이를 DOM tree라고 부른다. DOM tree의 꼭대기에 있는 노드의 이름이 "Document object"다. 자바스크립트는 DOM을 이용해서 HTML 문서내에서 브라우저의 상태를 확인할 수 있다.