제8장. DOM

XML 문서 객체 모델

예제 문서 및 DOM 트리

<?xml version="1.0"?>
<order num="312597">
    <date>2000/1/1</date>
    <customer id="216A">Company A</customer>
    <item>
        <part-no ware="W11">E16-25</part-no>
        <descr>Widget</descr>
        <quantity>16</quantity>
    </item>
</order>

XML DOM

Parser
- XML 문서를 읽고 해석 : well-formed, valid 검사
- 응용 개발시 파서 사용 이유 : 세부적인 XML 문법으로부터 프로그램 격리
  - 파서가 메모리에 DOM 트리를 생성 : XML 문서트리와 일치
인터페이스, API

객체의 속성과 메소드를 사용하기 위한 사양
문서 예
<parent>
<child id="123">text here</child>
</parent>
DOM 인터페이스 예
- 문서.childNodes[0].nodeName
- 문서.firstChild.firstCild.firstCild.nodeName
- 문서.firstChild.firstCild.firstCild.nodeValue

DOM
의 역할
- 구조의 탐색 : 각 요소와 속성에 대한 탐색/질의가 가능
- 문서 구조의 조작 : 문서 구조에서 요소, 속성의 추가/수정/삭제가 가능
- 컨텐츠의 조작 : 문서 요소에서 text 등 컨텐츠의 탐색/추가/수정/삭제가 가능

DOM 개요
- 문서내 객체(element)를 조작하기 위한 인터페이스(API)
  - DOM level 1 : ’98.10 W3C Recommendation
  - DOM level 2 : 2000.11 W3C Recommendation
  - DOM level 3 : 2001.8 W3C Working Draft
- 대상 문서 : XML1.0 또는 HTML4.0, 기타 웹문서

DOM Core Interface (Object Hierachy)

DOM 사용하기 : Document 객체 생성

DOMDocument 객체 생성 및 읽기
- Msxml.DOMDocument 객체
- async 속성, load 메소드, xml 속성

MSXML 파서 설치한 경우	MSXML 파서 설치안한 경우
<HTML> <HEAD> <Script language="Javascript"> function xload0() { var xdoc = new ActiveXObject("Msxml.DOMDocument"); xdoc.async = false; xdoc.load("ex08.xml"); alert(xdoc.xml); } </script> </HEAD> <BODY> <input type="button" value="XML 로드0" onClick="xload0()"> </BODY> </HTML>	111<HTML> <HEAD> <Script language="Javascript"> function xload1() { xdoc.async = false; xdoc.load("ex08.xml"); alert(xdoc.xml); } </script> </HEAD> <BODY> <input type="button" value="XML 로드1" onClick="xload1()"> <xml id="xdoc"></xml> </BODY> </HTML>
VBScript 의 경우
<Script language="VbScript"> Dim xdoc Set xdoc = CreateObject("Msxml.DOMDocument") xdoc.async = False; xdoc.load("ex08.xml"); MsgBox xdoc.xml </Script>

신규 문서 작성 : loadXML 메소드

xdoc.async = false;
xdoc.loadXML( "<book><title>XML 입문</title><author>일지매</author></book>");
alert(xdoc.xml);

xdoc.async = false;
xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
alert(xdoc.xml);

공백의 처리 : preserveWhiteSpace 속성

xdoc.async = false;
xdoc.preserveWhiteSpace = true;
xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
alert(xdoc.xml);

xdoc.async = false;
xdoc.preserveWhiteSpace = true;
xdoc.load("ex07a.xml");
alert(xdoc.xml);

XML 문서의 저장 : save 메소드

에러 처리 : parseError, parseError.line, parseError.linepos, parseError.reason

xdoc.async = false;
xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </authors> </book>");
alert(xdoc.xml);

xdoc.async = false;
xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </authors> </book>");
if (xdoc.parseError)
alert("에러 위치 : " + xdoc.parseError.line + "번째 라인 " + xdoc.parseError.linepos
+ "번째 문자\n\n에러 이유 : " + xdoc.parseError.reason);
else alert(xdoc.xml);

루트 노드 찾기 : documentElement 속성

xdoc.async = false;
xdoc.load("ex08.xml");
var xroot = xdoc.documentElement;
alert(xroot.nodeName);

xdoc.async = false;
xdoc.loadXML( "<book> <title> XML 입문 </title> <author> 일지매 </author> </book>");
var xroot = xdoc.documentElement;
alert(xroot.nodeName);

Node 객체의 정보 구하기

Node 객체의 운행(Traversal) 관련 속성
- 관련속성
- hasChildNodes() 메소드

Node 객체의 속성
- nodeName, nodeType, nodeValue, attributes, text 속성
- nodeType = 1(element), 2(attribute), 3(text) , 4(CDATA), ... : [부록A]

xdoc.load("ex08.xml");
var xroot = xdoc.documentElement;
alert('nodeName: '+xroot.nodeName+'\nnodeType: '+xroot.nodeType+
'\nnodeValue: '+xroot.nodeValue+'\nattributes: '+xroot.attributes.length);
alert(xroot.text);

NodeList 객체
- 노드들의 리스트, 예: childNodes 객체
- length 속성, item(번호) 메소드

xdoc.load("ex08.xml");
var xroot = xdoc.documentElement;
if (xroot.hasChildNodes) {
     alert(xroot.childNodes.length);
     var curr = xroot.firstChild;
     alert(curr.xml);
     alert(curr.nodeName + curr.nodeType
      +curr.nodeValue+curr.attributes.length);
}
else alert('No Child');

xdoc.load("ex08.xml");
var xroot = xdoc.documentElement;
var curr = xroot.firstChild.nextSibling;
alert(curr.xml);
curr = curr.childNodes.item(2);
alert(curr.xml);
curr = curr.previousSibling;
alert(curr.text);
alert(curr.nodeName + curr.nodeType
+curr.nodeValue+curr.attributes.length);

NamedNodeMap 객체
- 이름="값"의 쌍으로 구성된 객체의 모임, 순서 상관 없음
- getNamedItem("속성명"), setNamedItem(), removeNamedItem() 메소드

xdoc.load("ex08.xml");
var xroot = xdoc.documentElement;
var attrs = xroot.firstChild.attributes;
var attr0 = attrs.getNamedItem("InStock");
alert(attr0.nodeName + attr0.nodeValue );

임의 노드의 검색

태그 이름으로 검색
- 노드리스트 = 문서.getElementsByTagName("tagName");

xdoc.load("ex08.xml");
var nlist =
xdoc.getElementsByTagName("book");
for (i=0; i<nlist.length; i++)
alert(nlist.item(i).xml);

xdoc.load("ex08.xml");
var nlist =
xdoc.getElementsByTagName("title");
for (i=0; i<nlist.length; i++)
alert(nlist.item(i).xml);

패턴으로 검색
- 노드리스트 = 노드.selectNodes("query");
- 노드 = 노드.selectSingleNode("query");

xdoc.load("ex08.xml");
var xroot = xdoc.documentElement;
var node1 = xroot.selectSingleNode("title");
alert(node1.text);
var tlist = xroot.selectNodes('//title');
var alist = xroot.selectNodes('//author');
for (i=0; i<alist.length; i++)
    alert('['+i+'] '+alist.item(i).text+', '
           +tlist.item(i).text);

xdoc.load("ex08.xml");
var xroot = xdoc.documentElement;
var node1 = xroot.
   selectSingleNode('//book[@InStock=0]');
alert(node1.xml+'\n=> 재고가 없습니다.');
var tlist = xroot.
    selectNodes('//book[@InStock!=0]/title');
for (i=0; i<tlist.length; i++)
    alert(tlist.item(i).text+'\n=>재고 있음.');