03.HTML 4.X, HTML5, XML.../XML

XML JavaScript DOM (XML 정보 보기)

1010 2008. 10. 25. 02:14
반응형

지각조퇴결석사유서.xml 문서 만들기

<?xml version="1.0" encoding="EUC-KR"?>
<?xml-stylesheet type="text/xsl" href="지각조퇴결석사유서.xsl"?>
<지각조퇴결석사유서>

 <과정>ASP.NET</과정>

 <기간>30일 완성</기간>
 <사유정보 번호="1">
  <성명>홍길동</성명>
  <주민번호>111111-1111111</주민번호>
  <구분 종류="지각"/>
  <날짜>2006.03.11</날짜>
  <사유>감기몸살로 -_-;;</사유>
 </사유정보>
 <사유정보 번호="2">
  <성명>아무게</성명>
  <주민번호>222222-2222222</주민번호 >
  <구분 종류="결석"/>
  <날짜>2006.04.15</날짜>
  <사유>
   <![CDATA[
   <strong>2007-06-28 12:30, coex megabox</strong><BR>
<BR>트렌스포머를 보러갔다.<BR>
<BR>처음부터 많은 기대를 하고 있었고 개방일만을 눈빠지게 기다리고 있던터라<BR>
<BR>개봉을 하자마자 달려가서 보았다.<BR>
<BR>아무튼 진부한 스토리라도 비주얼에 너무 정신을 빼앗기다 보니<BR>
<BR>스토리가 부실해도 상당히 재미있었다.<BR>
<BR>가장 기억에 남는 대사는 샘의 해피타임정도?<BR>]]>
  </사유>
 </사유정보>
 <사유정보 번호="3">
  <성명>테스트</성명>
  <주민번호>111111-1111111</주민번호>
  <구분 종류="지각"/>
  <날짜>2006.05.24</날짜>
  <사유>개인 사정</사유>
 </사유정보>
</지각조퇴결석사유서>


지각조퇴결석사유서.html 파일 만들기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
  <script language="javascript">
   var xmlDoc;
   function startXml()
   {
    xmlDoc=new ActiveXObject("microsoft.XMLDOM");    
    xmlDoc.async=false;    
    xmlDoc.load("지각조퇴결석사유서.xml");
    document.getElementById("txtOutput").value=xmlDoc.xml;
   }
   
   function XmlInfo()
   {
    var result="";
    //루트 엘리먼트
    result += "Root Element : " + xmlDoc.documentElement.nodeName+"\n\n";
    //루트 엘리먼트의 첫번째 자식 엘리먼트
    result+="첫번째 자식 : "+xmlDoc.documentElement.firstChild.nodeName+"\n\n";
    //루트 엘리먼트의 마지막 자식 엘리먼트
    result+="마지막 자식 : "+xmlDoc.documentElement.lastChild.nodeName+"\n\n";
    //루트 엘리먼트의 두번째 자식 엘리먼트 (첫번째 방식)
    result+="두번째 자식 : "+xmlDoc.documentElement.childNodes.item(1).nodeName+"\n\n";
    //루트 엘리먼트의 두번째 자식 엘리먼트 (두번째 방식)
    result+="두번째 자식 : "+xmlDoc.selectNodes("//기간").item(0).nodeName+"\n\n";
    //사유정보 3번째의 이름 (첫번째 방식)
    result+="3번째 이름 : "+xmlDoc.documentElement.lastChild.firstChild.text+"\n\n";
    //사유정보 3번째의 이름 (두번째 방식)
    result+="3번째 이름 : "+xmlDoc.documentElement.childNodes(4).firstChild.text+"\n\n";
    //사유정보 3번째의 이름 (세번째 방식)
    result+="3번째 이름 : "+xmlDoc.selectNodes("//사유정보").item(2).firstChild.text+"\n\n";
    //사유 갯수
    result+="사유 갯수 : "+xmlDoc.selectNodes("//사유정보[구분 and @번호]").length+"개\n\n";
    //지각 갯수
    result+="사유 갯수 : "+xmlDoc.selectNodes("//구분[@종류='지각']").length+"개\n\n";
    //속성접근
    result+="2번째 종류 : "+xmlDoc.selectNodes("//사유정보").item(1).childNodes(2).attributes(0).value+"\n\n";

    alert(result);
   }  
  </script>
 </head>
 <body onload="startXml();">
  <h3>지각조퇴결석 사유서</h3>
  <textarea cols="120" rows="15" id="txtOutput"></textarea>
  <p></p>
  <button onclick="XmlInfo()" ID="Button1">XML 정보 보기</button>
 </body>
</html>