JAVASCRIPT 에서 XML 문서 DOM,XPATH 로 파싱하기

먼저 알아야 할것은 dom 으로 파싱을 하려면 파싱하려는 문서의 contextType 이 text/xml 이어야 한다는 것이다. (이것때문에 좀 고생했다..ㅡ.ㅡ;)

윗쪽에 "<?xml version="1.0" encoding="euc-kr" ?>" 이처럼 xml 선언을 해 주어도 페이지 contextType 이 text/xml 이 아니면 파싱이 안되니 주의하자. (거꾸로 이처럼 xml 선언을 안해줘도 contextType 이 text/xml 이면 파싱이 가능하다.)

이 문서에서 쓸 테스트 xml 파일을 만들어 보자.

---

<root>
<subtitle attr1="testattr1">
<subitem attr="testattr">item1</subitem>
<subitem>item2</subitem>
<subitem>item3</subitem>
</subtitle>
<subtitle2>test</subtitle2>
</root>

---

간단하다..

일단 위 파일을 XMLHttpRequest 로 받은후에 responseXML 속성을 받아서 파싱하면 되겠다.

1. subtitle 의 attr1 의 데이터 가져오기.

---

xmlObj.getElementsByTagName("subtitle")[0].getAttribute("attr1")

---

- 위와같이 하면되는데 getElementsByTagName("subtitle") 는 문서내에 있는 subtitle 라는 태그를 모두 배열에 담아 돌려준다는것을 기억하자.

2. subtitle2 의 텍스트 가져오기.

---

xmlObj.getElementsByTagName("subtitle2")[0].text

---

- 노드가 가지고있는 데이터 내용을 출력할때는 text 속성을 쓴다는것을 기억하자.

3. subtitle 하위태그로 있는 subitem 태그들을 배열로 받아보자.

---

xmlObj.getElementsByTagName("subtitle")[0].childNodes

---

- 위와같이 하면 된다. 현재 테스트 문서에 subitem 은 3개 있으니 .length = 3 이 되겠다.

4. 그럼 간단하게 subitem 의 모든내용을 출력하는 것을 만들어보자.

---

var nodes = xmlObj.getElementsByTagName("subtitle")[0].childNodes;

for (var i=0;i<nodes.length;i++) {

alert(nodes[i].text);

}

---

가장 기본적인 xml 탐색방법을 알아봤다.

이걸 응용해서 어떤 것이든 탐색이 가능하겠지만 귀찮다.

그래서 나온지는 모르겠는데(ㅡ.ㅡ;) 하여튼 나온게 XPATH 이다.

자 그럼 이제 xpath 탐색법을 배워보자.

- 아래는 xpath 연산자이다.

연산자	의미	예
/	자식노드 지정	root/subtitle (<root>의 자식인 <subtitle>)
//	후손전체지정	root//subitem (<root>의 후손중 모든 <subitem>)
*	와일드카드	root/* (<book>의 모든 자식요소) root/@* (<book>의 속성전체)
.	자기자신	.//subtitle
..	부모노드	../subtitle
|	노드의 논리합	root/subtitle|root/subtitle2 ( root/subtitle 와 root/subtitle2 을 모두 찾는다)

- 이제 예제들을 보자.

1. root/subtitle 노드를 탐색해 보자.

---

xmlObj.selectSingleNode("root/subtitle")

---

- selectSingleNode 하면 매칭되는 노드가 여러개있어도 그중 최상위 하나만 돌려준다.

  모두 검색하려면 selectNodes(xpath) 를 쓰면 된다.

2. 이제 getElementsByTagName() 처럼 모든 태그를 검색해서 원하는 노드를 가지고오는 것을 해보자.

---

xmlObj.selectSingleNode("//subtitle")

---

- 위와같이 "//" 연산자를 쓰게되면 해당 노드의 하위를 검색해서 일치하는 이름의 노드를 돌려준다.

- "//" 연산자는 어디든 올수있다. 예를들어 "root//subtitle" 라고 검색을 하게되면 root 이하의 노드에서 subtitle 를 찾게되는것이다.

- 단 "//" 연산자는 쓰기는 편하나 xml 파일이 커질수록 부하가 늘어난다는점을 기억하자.

3. 이제 좀더 나가서 subtitle 의 subitem 중 item2 라는 데이터값을 가지고있는 노드를 검색해보자.

---

xmlObj.selectNodes("/root/subtitle/subitem[.='item2']")

---

- 이거 놀랍지 않은가? for 문 같은거 안써도 된다..ㅡ.ㅡ;;

- item 값옆에 [] 를 쓰고 해당 데이터값을 기준으로 검색할수가 있다.

- 여기서 '.' 은 자기 자신을 의미한다.

4. subtitle 의 subitem 중 attr 속성이 'testattr' 인것을 검색해보자.

---

xmlObj.selectNodes("/root/subtitle/subitem[@attr='item2']")

---

- '@' 요걸 쓰면 된다.

- 단 [] 구문은 / 옆이 아니라 item 이름 옆에 온다는것을 기억하자.

5. 이제 좀헷깔리는 문제를 보자. 아래두 구문의 차이는 무엇일까?

---

xmlObj.selectNodes("/root/subtitle[subitem='item2']")

xmlObj.selectNodes("/root/subtitle/subitem[.='item2']")

---

- 둘다 subitem 의 데이터를 검색하긴 한다 그러나 위에것은 subtitle 노드를 돌려주고 아래것은 subitem 노드를 돌려준다.

- [] 구문은 바로 옆에 있는 노드를 돌려준다는것을 기억하자.

6. 자 아래 구문을 보자.

---

xmlObj.selectNodes("/root/subtitle/subitem/@*");

---

- 어떤 노드의 속성을 모두 탐색하고 싶다면 위와같이 하면 된다.

- 속성이 속성값이 아니라 하나의 노드로 인식해서 돌려주게된다.

- 위의 내용은 subitem 에 속성은 attr 밖에 없으니까 attr 노드를 돌려주게 되는것이다.

- 소스로 설명하면 아래와 같다.

---

<subitem attr="testattr"/>

---

위의 소스를

---

<subitem>

  <attr>testattr</attr>

</subitem>

---

위와같이 인식하는 것이다.