HTML문서는 텍스트로만 작성되어 있으며 브라우저는 이 텍스트를 브라우저에서 사용할 수 있는 모델 형태로 변환하게 된다.
그리고 이 내부 모델을 기반으로 웹페이지를 출력하고 이벤트를 처리한다. DOM이라는 것이 바로 이 모델을 표준화 한 것으로써 웹페이지와의 상호작용을 구현 가능케 한다.
한 예로, HTML문서에 div 엘리먼트가 있다면 이 엘리먼트에 접근하여 엘리먼트 안에 텍스트를 넣는 등 클릭했을때의 이벤트를 넣는다는 등의 작용을 구현할 수 있다는 이야기이다.
:사실상 이 DOM이 Javascript라고는 말할 수 없지만(DOM은 고유의 프로그래밍 언어이기 때문에) Javascript는 이 DOM에 접근해 그 사용을 용이하게 하는 스크립트 언어이기 때문에 Javascript를 알기 이전에 DOM에 대한 이해가 충분해야만 한다(CSS의 서택자 역시 DOM에 접근하게 된다).
DOM 레벨 0
사용자와 웹 페이지의 다양한 요소가 서로 상호작용했다면 자바스크립트는 필요 없었을 것이다. 넷스케이프2가 자바스크립트를 통해 개발자가 웹 페이지의 특정 요소에 접근하고 해당 요소의 속성을 교체할 수 있는 API(Application Programming Interface)를 제공했으며, 마우스클릭이나 마우스오버와 같은 특정 이벤트가 발생하면 이벤트가 발생했음을 알려주어 이벤트에 응답할 수 있는 기능을 제공했다. 바로 이 API가 DOM인 것이다. 하지만 당시 넷스케이프2의 DOM기능은 매우 제한적이었다.
이후, 1996년 IE3는 독자적인 자바스크립트 버전인 JScript를 발표했고, 이 당시의 초기 DOM을 기술적 언어로 DOM 레벨 0이라고 지칭한다.
중급 DOM
1997년, 불완전한 CSS와 브라우저의 호환성을 고려하지 않고 구현된 DOM 기술에도 불구하고 IE4와 넷스케이프4는 널리 사용되었다. DOM 레벨 0와 마찬가지로 중급 DOM(Intermediate DOM) 역시 W3C의 표준안이 적용되지 않았다. 하지만, 중급 DOM은 현재 널리 사용되는 Ajax 기반 웹사이트와 웹 애플리케이션의 초석이 될 가능성을 보여주었다. 중급 DOM에부터 자바스크립트로 HTML요소가 가진 대부분의 속성에 접근할 수 있었고, HTML 요소의 CSS 속성을 프로그래밍 기법으로 수정할 수 있었기 때문이다. 다시 말해 CSS와 중급 DOM이 현대 웹 개발 기술의 시초라 할 수 있다.
DOM 레벨 1
CSS1과 HTML4의 성공 이후, W3C는 따로따로 개발하던 DOM의 표준화 작업을 시작했다. 처음에 넷스케이프는 Ecma International(:컴퓨터 시스템을 표준화하는 비영리 기구)을 자바스크립트 표준화 기구로 채택했지만(이런 이유로 자바스크립트 공식 명칭은 EcmaScript가 되었다.) 이 후 W3C가 넷스케이프, 마이크로소프트, 그 외 다른 조직 멤버와 함께 DOM 표준화를 제정하여 1998년 DOM레벨 1을 발표했다.
DOM 레벨 2
DOM 레벨 2는 지금의 DOM 이벤트 모델을 최초로 제시했다. 개발자는 이벤트 모델을 이용하여 사용자와의 상호작용을 구현하고 이벤트를 처리할 수 있다. DOM 레벨 2는 모든 브라우저에서 완벽하게 지원하는 것은 아니지만, 2000년 발표된 후 널리 보급되었다.
DOM 레벨 3
DOM 레벨 3은 DOM 레벨 2를 확장한 버전이지만, 아직까지 많은 브라우저에서 DOM 레벨 3을 완변하게 지원하지 못한다. 하지만, DOM 레벨 3의 중요한 기능은 대부분 모든 브라우저에서 지원하며 일부는 현재 DOM 스크립트의 핵심을 담당하고 있다.
어떤 기능을 어느 수준의 DOM에 포함했는지는 그리 중요하지 않다. 현재 대다수의 개발자는 다양한 자바스크립트 라이브러리로 DOM에 접근하는 방식을 사용하기 때문이다.
DOM 계층구조
HTML 문서에 담긴 텍스트를 브라우저가 DOM을 사용해서 다음 텍스트 코드를 모델화하는 방법을 알아보자
|
<html> <head> <title>Semple</titlt> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> <body> <p class="addClass">여기는 <em>한국</em> <a href="index.html">초기화면으로</a> </p> </body> </html> |
브라우저는 HTML의 모든 요소를 객체화하고 이 객체를 계층 구조로 묶어, 어떤 요소가 다른 요소 내부에 포함되어 있을 때, 이 요소는 자신을 포함한 요소의 자손 요소로써 구조화한다. 예를 들어, 앞 코드에서 p 요소는 a 요소의 부모이며 em 요소와 a 요소는 형제 관계를 맺는다. 이렇게 객체화된 요소는 여러 속성을 가질 수 있으며 HTML 요소 속성을 그대로 사용하기도 한다. 즉, 객체 속성 이름으로 속성에 접근하여 상호작용을 통해 속성을 바꿀 수도 있다는 이야기다. DOM의 상세 명세를 보면 DOM 객체의 특정 타입 속성에 대한 정의를 확인할 수 있다.
위의 HTML 문서를 DOM 계층구조로 보면 이런 그림이 나온다.
아주 간단한 예제로 a요소의 href 속성을 불러오는 방법을 알아보자.
a 요소를 가져와 link라는 변수로 저장했을 때
link.href; // (.)이 해당 요소의 속성에 접근하는 표기법이다.
또 한 예로
link.href = "http://blog.naver.com/shoolovu"; // a 요소의 href 값을 해당 url로 바꾸는 코드이다.
또한 이 값을 경고창으로 띄우는 방법 또한 (.)표기법을 사용하여 속성에 접근하면 간단하다.
window.alert(link.href); // 경고창으로 index.html 이라는 메시지가 출력될 것이다(위의 코드는 무시).
[출처] DOM(Document Object Model) - 개념|작성자 엔틱공장장