먼저 알아야 할것은 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>


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


신고

' > Web' 카테고리의 다른 글

부분적으로 XSL 적용하기.  (22) 2007.08.22
XSL 엘리먼트 정리  (22) 2007.08.22
텍스트 로 자바스크립트 실행하는 방법  (44) 2007.08.01
xsl 에서 태그 속성 바꾸기.  (23) 2007.07.16
웹페이지 인코딩  (23) 2007.06.11
JAVASCRIPT 에서 XML 문서 DOM,XPATH 로 파싱하기  (26) 2006.12.16
by cranix 2006.12.16 20:13
| 1 |