DOM(Document Object Model)
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
<!DOCTYPE food SYSTEM "food.dtd">
Processing instruction
<?xml version="1.0"?>
Element
<drink type="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)
▶ 직접 테스트 또는 XML 문서 열어 보기
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
▶ 직접 테스트 또는 CD 카타로그 테스트
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.childNodes
to.innerText = nodes.item(0).text
from.innerText = nodes.item(1).text
header.innerText = nodes.item(2).text
body.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)
▶ 직접 테스트
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")set xmlDoc = CreateObject("Microsoft.XMLDOM")set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")<script language="JavaScript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
// ....... 나머지 스크립트 처리
</script><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>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)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)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)
nextvar xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
nodes = xmlDoc.documentElement.childNodes
to.innerText = nodes.item(0).text
from.innerText = nodes.item(1).text
header.innerText = nodes.item(2).text
body.innerText = nodes.item(3).textvar xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
document.write(xmlDoc.getElementsByTagName("from").item(0).text)1.DOM 속성
childNodes현재 노드의 자식 노드를 배열로 돌려준다.
firstChild
현재 노드의 첫 번째 자식 노드를 참조한다.
lastChild
현재 노드의 마지막 자식 노드를 참조한다.
nextSibling
현재 노드의 바로 다음의 노드를 반환한다.
nodeName
노드의 qualified name을 반환한다.
nodeType
노드의 XML DOM 노드 형식을 지정한다.
nodeValue
해당 노드의 값을 참조한다.
ownerDocument
해당 노드를 포함하는 루트 엘레먼트를 반환한다.
parentNode
해당 노드의 부모 노드를 반환한다.
previousSibling
현재 노드 바로 앞에 오는 노드를 반환 한다.
xml
현재 노드와 자식노드의 XML을 문자열로 반환한다.(IE 전용)
text
현재 노드와 자식노드 들의 텍스트를 연결한 콘텐트를 반환 한다.(IE 전용)
2.DOM 메소드
getElementById(idName)도큐먼드에서 idName의 id로 정의된 요소를 찾아 반환한다.
getElementsByTagName(tagName)
tagName을 가진 태그들의 노드 객체를 찾아 배열로 반환한다.
document.createElement(tagName)
tagName 으로된 엘리먼트를 생성한다.
document.createTextNode(text)
정적 텍스트를 담고 있는 노드를 생성한다.
<element>.appendChild(childNode)
childNode를 에레먼트의 자식 노드로 추가 한다.
<element>.getAttribute(name)
에레먼트에서 name에 해당하는 어트리뷰트 값을 반환한다.
<element>.setAttribute(name, value)
엘레먼트에 name 속성에 value 값을 할당한다.
<element>.insertBefore(newNode, tartgetNode)
엘레먼트의 자식노드 중 tartgetNode 전에 newNode를 삽입한다.
<element>.removeAttribute(name)
엘리먼트에서 name 어트리뷰트을 제거한다.
<element>.removeChild(childNode)
엘레먼트에서 자식 childNode 노드를 제거한다.
<element>.replaceChild(newNode, oldNode)
엘레먼트에서 oldNode 를 newNode 로 치환한다.
<element>.hasChildNodes()
엘레먼트가 자식 노드를 포함하는 경우 true, 자식요소가 없는 경우 false를 반환한다.
[출처] Microsoft.XMLDOM|작성자 모과이
Rss Feed