DOM은 HTML과 XML 문서를 연결시켜주는 프로그래밍적 인터페이스이다. DOM은 어떤 XML 문서를 열고 XML 데이터를 처리할 수 있는 방법을 정의하고 있다.
DOM을 이용하면 개발자는 XML 문서를 만들 수 있고, XML 문서 구조를 내비게이션할 수 있으며, 그 요소들을 추가/수정/삭제할 수 있다.
DOM의 중요한 목적은 아주 다양한 환경과 애플리케이션에서 사용할 수 있는 표준적인 프로그래밍 인터페이스를 제공하는 것이다.
W3C DOM은 어떠한 프로그래밍 언어로도 개발될 수 있도록 고안되었다.
노드(Node) 인터페이스
다음 장에서 살펴보겠지만 XML 문서를 읽어들이기 위해 XML 파서(XML Parser, XML 해석기)라고 불리는 프로그램이 사용될 것이다. 문서가 메모리로 올라오면Document Object Model (DOM)를 통해 XML 문서의 정보를 읽고 조작할 수 있게 된다.
DOM은 XML 문서 구조를 트리 형식으로 나타낸다.documentElement는 그 트리의 탑-레벨이다. 이 요소는 하나 또는 그 이상의 자식 노드(childNodes)를 가진다. 이 자식 노드는 그 트리의 가지로 보면 된다.
노드 인퍼페이스(Node Interface)는 XML 노드 트리의 각 요소를 읽고 쓰기 위해 사용된다. 각각의 노드를 접근하기 위해 documentElement의 childNodes 속성을 접근할 수 있다.
Microsoft XML parser는 인터넷 익스플로러에서 DOM을 입증하기 위해 사용된다. 이 파서는 노드 트리를 탐색하고, 노드와 그 노드의 속성 값에 접근하고, 노드의 추가/삭제, 노드 트리를 XML로 바꾸는 등의 모든 필요한 기능들을 지원한다.
Microsoft XML parser의 모든 입증된 기능은 공식적인W3C XML DOM 권고안을 따른다.
Microsoft XML parser는 현재 전체 13개의 노드 타입을 지원한다. 가장 많이 사용되는 노드 타입은 다음 표와 같다:
노드 타입(Node Type) | 예 |
---|---|
Document type | <!DOCTYPEfood SYSTEM "food.dtd"> |
Processing instruction | <?xmlversion="1.0"?> |
Element | <drinktype="beer">Carlsberg</drink> |
Attribute | type="beer" |
Text | Carlsberg |
DOM 관련 예제를 보려면 Microsoft Internet Explorer 5.0 이상을 사용해야 한다!
XML 파서(parser) 이용하기
XML 문서를 읽고, 수정하고, 생성하고, 조작하려면 XML 파서가 필요하다. Microsoft XML parser는 Microsoft Internet Explorer 5.0 이상과 함께 나오는 COM 요소이다. 일단 IE 5.0 이상을 설치하면 HTML 문서나 ASP 파일에서 스크립트를 이용할 수 있다.
Microsoft XMLDOM parser는 언어 중립적인 프로그래밍 모델이다:
- JavaScript, VBScript, Perl, VB, Java, C++ 및 그 이외의 언어 지원
- W3C XML 1.0 및 XML DOM 지원
- DTD 및 validation 지원
만일 IE 5.0 이상에서 자바스크립트를 이용한다면 다음과 같이 XML 문서 개체를 생성할 수 있다:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") |
만일 VBScript를 사용한다면 다음과 같이 XML 문서 개체를 생성할 수 있다:
set xmlDoc = CreateObject("Microsoft.XMLDOM") |
만일 ASP에서 VBScript를 사용한다면 다음과 같이 XML 문서 개체를 생성할 수 있다:
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM") |
XML 문서 파서로 읽어들이기
다음 코드는 기존 XML 문서(여기서는 note.xml)를 XML 파서로 읽어들이는 예이다:
<script language="JavaScript">var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("note.xml")// ....... 나머지 스크립트 처리</script> |
제일 먼저 XMLDOM 개체의 인스턴스를 만들고 note.xml이란 문서를 파서로 하여금 읽어들이게 한다. xmlDoc.async="false" 부분은 문서를 완전히 읽을 때가지 실행을 중지할 것을 의미한다.
순수 XML 텍스트를 파서로 읽어 들이기
다음 코드는 텍스트 문자열을 XML 파서로 읽어들이는 예이다:
<script language="JavaScript">var text="<note>"text=text+"<to>철수</to><from>다니엘</from>"text=text+"<heading>기억할 것</heading>"text=text+"<body>이번 주 약속 잊지말 것!</body>"text=text+"</note>"var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.loadXML(text)// ....... 나머지 스크립트 처리</script> |
load 메소드 대신 loadXML 메소드를 사용하고 있음을 주목하기 바란다.
parseError 개체
만일 XML 문서를 연다면 XML 파서는 에러를 발생할 수도 있다. parseError 개체를 사용하면 정확한 에러 코드, 에러 이유, 에러가 발생한 라인 등을 얻을 수 있다.
파일 에러
아래 예는 XML 파서로 하여금 존재하지 않는 파일을 읽어 들이게 한 후 에러에 대한 정보를 보여주는 것이다:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("ksdjf.xml")document.write("<br>Error Code: ")document.write(xmlDoc.parseError.errorCode)document.write("<br>Error Reason: ")document.write(xmlDoc.parseError.reason)document.write("<br>Error Line: ")document.write(xmlDoc.parseError.line) |
▶ 직접 테스트
XML 에러
아래 예는 XML 파서로 하여금 "well formed" 문서가 아닌 XML 문서를 읽어들이게 한 후 발생하는 에러를 살펴보는 것이다. ("well formes" 문서에 대한 자세한 설명은 "XML 기초 다지기 - 유효성" 부분을 읽어 보기 바란다)
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("note_error.xml")document.write("<br>Error Code: ")document.write(xmlDoc.parseError.errorCode)document.write("<br>Error Reason: ")document.write(xmlDoc.parseError.reason)document.write("<br>Error Line: ")document.write(xmlDoc.parseError.line) |
parseError 속성
속성 | 설명 |
errorCode | long integer형의 에러 코드를 반환 |
reason | 에러에 대한 이유를 설명하는 문자열 반환 |
line | long integer형의 에러가 발생한 라인 반환 |
linePos | long integer형의 에러가 발생한 위치 반환 |
srcText | 에러를 일으킨 라인을 포함을 문자열 반환 |
url | 열린 문서의 URL 반환 |
filePos | long integer 형으로 에러의 파일 포지션 반환 |
XML 문서에서 XML 요소를 얻어오는 가장 흔한 방법은 노드 트리를 순회하여 각 요소의 텍스트 값을 얻어 오는 것이다. 어떻게 하는지에 대한 예를 들기 위해 VBScript의 for/each문을 사용하였다.
다음은 XML 노드 트리를 탐험하여 브라우저에 XML 요소를 표시하는 VBScript 코드이다:
set xmlDoc=CreateObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("note.xml")for each x in xmlDoc.documentElement.childNodes document.write(x.nodename) document.write(": ") document.write(x.text)next |
Providing HTML content from XML files
XML을 사용하는 가장 큰 이유 중의 하나가 HTML 문서에서 데이터 부분을 분리하기 위함이다. 브라우저에 내장된 XML 파서를 사용함으로써 XML 문서에 있는 데이터를 자바스크립트로 접근하여 HTML 파일 내에 표시할 수 있게 된다.
아래 예는 자바스크립트를 이용하여 XML 데이터를 읽어들인 후 HTML 요소에 대입하는 예이다:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("note.xml")nodes = xmlDoc.documentElement.childNodesto.innerText = nodes.item(0).textfrom.innerText = nodes.item(1).textheader.innerText = nodes.item(2).textbody.innerText = nodes.item(3).text |
▶ 직접 테스트
이름으로 XML 요소 접근하는 방법
아래 예는 자바스크립트로 XML 데이터를 읽은 후 HTML 요소에 대입하는 예이다. 이 때 요소의 이름을 통해 XML 데이터에 접근하는 것을 볼 수 있을 것이다:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("note.xml")document.write(xmlDoc.getElementsByTagName("from").item(0).text) |
▶ 직접 테스트