닉스로그

HTML 페이지에 부분적으로 XML/XSL 을 적용할수 있게 하는 javascript

[code]    var xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async=false;
    xml.load("a.xml");

    var xsl = new ActiveXObject("Microsoft.XMLDOM");
    xsl.async=false;
    xsl.load("a.xsl");

    document.write(xml.transformNode(xsl));[/code]

HTML 에디터를 만들었다.

언제나 그랬듯 내 프로그램의 모토는

적용은 간단하게!

사용은 편리하게!

이다.


이번것도 적용하는거 무지하게 쉽게 해놨다.

위 그림은 기본폼에 적용해 본것이고,

소스와 설명은 아래에...

이 프로그램의 모토는 간편하게 이다.

설치도 간편 쓰기도 간편.

activex 같은거 안썻고 javascript 로 되어있어서 무지하게 가볍다.

document 내에 레이어 이런거 하나도 안만들어줘도 된다.

어떤 스크립트와도 충돌 안나게 혼자서 알아서 잘 돌아갈것이다.

소스는 아래에..

텍스트를 눌렀을때 자바스크립트가 실행되게 하는 방법에는 여러가지가 있다.

첫번째로 가장 흔히 쓰이는 href 속성을 이용하는것이다.

다음으로 쓰이는 방법이 onclick 속성을 이용하는것인데.


이 방법은 클릭 했을때 # 에 의해 문서의 제일 처음으로 간다는 단점이 있어서 잘 쓰지는 않는다.

그럼 첫번째 방법은 단점이 없느냐?

없는줄 알았다..ㅡ.ㅡ;

두 방법의 차이점은 바로 event 객체의 사용 유무 이다.

첫번째 href 속성으로 했을경우 event 객체를 사용하면 거기서 스크립트가 멈춰버린다..

오류도 없다. 메시지도 없다.. 그냥 멈춘다..ㅡ.ㅡ;

a 태그가 그런 단점을 가진다면 어떻게 하는것이 좋을까?

경험으론 아래와같이 span 태그를 이용하는 방법이 가장 좋다.


그냥 쓰면 커서가 변하지 않아서 링크처럼 안보이기때문에 부득이 style 을 쓰느라고 조금 길어졌다.

그러나 긴만큼 a 태그사용에서 오던 문제점은 없다.

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

---

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