사이드바 영역으로 건너뛰기

문서객체모델(Document Object Model)

웹 기술과 관련한 글을 읽다보면 돔(DOM)이라는 말을 많이 접하셨을 것입니다. 이미 저도 지난 번에 Ajax에 대해 쓴 글에서 DOM을 언급한 적이 있죠. 문서객체모델(Document Object Model), 약자로 DOM이라고 부르는 객체지향적인 모델은 웹 기술에서뿐만 아니라 구조화된 데이터를 다루는 곳이라면 어느 곳에서라도 사용되고 있습니다.

 

HTML 같은 문서들은 태그들의 계층적인 집합으로 이루어져 있습니다. 예를 들자면 다음과 같은 문서는 HTML로 이렇게 표현이 되죠.

 

[html]

[head]

    [title]고양이 그림[/title]

[/head]

[body]

    [IMG id="cat_pic" src="http://imagepath" border=0]

[/body]

[/html]

 

 

이 HTML을 DOM 문서로 변환한다면 다음과 같은 DOM 객체가 만들어지게 됩니다.

 

 

태그들은 파란색 박스 안에, 태그 안에 쓰인 속성들은 녹색 박스 안에 표시되고 있습니다. 여기서 파란 색 박스로 표시된 DOM의 기본적인 요소를 노드(Node)라고 하며, 각 노드에 딸린 녹색 박스들을 속성(Attribute)이라고 합니다. 각 노드는 다른 노드의 상/하위에 위치할 수 있으며 각 속성은 노드의 하위에 위치합니다.

 

이렇게 계층적인 형태를 지닌 데이터 구조를 트리(Tree)구조라 부르는데, 비단 DOM 뿐만 아니라 데이터베이스의 인덱스, 윈도의 폴더/디렉토리 등에서 트리구조를 사용합니다. 이러한 트리구조의 장점이라 하면 역시 임의의 하위 요소로 빠르게 접근이 가능하다는 것이겠죠.

 

문서를 DOM 객체로 변환하고 나면, 문서의 요소에 임의적으로 접근하여 내용을 수정하거나 새로운 내용을 추가하는 등의 작업이 수월해집니다. DOM 객체의 노드에 접근하기 위해 id를 많이 사용합니다. 여기서 id는 각 노드를 구별해주는 고유한 값인데, 만약 문서 안에 같은 값을 지닌 id를 지닌 노드가 두 개 이상 존재한다면 가장 첫번째 선언된 노드 이외의 노드들은 id로 접근할 수 없게 되죠.

 

그럼 위의 HTML 문서에서 고양이 그림을 나타내주는 [img] 노드에 접근해 봅시다. 다음은 자바스크립트를 사용하여 [img] 노드에 접근하는 코드입니다.

 

[script language="javascript"]

[!--

  var obj = document.getElementById("cat_pic");

  var result = obj.src;

//--]

[/script]

 

"cat_pic"라는 id를 지닌 노드를 찾아온다음, 그 노드의 src값을 얻어왔습니다. 문서의 [img] 태그의 id가 "cat_pic"였으므로, DOM에서 [IMG] 노드를 가져오게 되고, [IMG] 노드는 src 속성의 값으로 "http://imagepath"를 지니고 있으므로, 최종적으로 result에는 "http://imagepath"라는 값이 들어가게 됩니다.

 

이런 식으로 id를 사용하면 문서의 요소에 임의적으로 접근하여 내용을 가져올 수도 있고 변경할 수도 있습니다. 위의 예에서는 자바스크립트를 사용했지만, DOM은 기본적으로 플랫폼이나 프로그램 언어의 제한없이 사용할 수 있기 때문에, 어떤 프로그램에서든지 DOM을 이용하여 동적으로 문서의 내용을 읽고 변경할 수 있죠. 지금은 동적인 페이지를 만들기 위해서 DOM은 거의 모든 페이지에서 필수적으로 사용되는 것 중 하나라고 할 수 있습니다.

 

다만 DOM에서도 웹 개발에서 가장 까다로운 점 중 하나인 브라우저 사이의 호환성 문제가 존재합니다. 이러한 문제를 정리하기 위해 웹표준기구인 W3C에서 DOM 표준을 제작하였으며 역시 표준화된 프로그래밍 인터페이스(API)를 제공하고 있지만, 비표준 역시 널리 사용되고 있는 것들이 많기 때문에 까다로운 지점들이 존재합니다. 따라서 DOM을 적극적으로 사용할 때에는 다양한 브라우저 환경에서의 테스팅이 필수적이죠. 비표준 확장으로 인한 불편함은 정말이지 여러 방면에 걸쳐있는 것 같습니다^_^;;;

진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크