技術標籤：xmljavascriptdomjs

XML操作實驗

實驗內容:
注意：以下程式碼均只支援IE，請在IE瀏覽器或者QQ瀏覽器相容模式下使用。
如需修改，請自行修改讀取XML檔案的函式loadXML()

1編寫程式，解析score.xml檔案，要求輸出的結果如圖1所示。

score.xml

<?xml version="1.0" encoding="UTF-8"?>
<score>
	<name>
	        <alias>張三</alias>
		<math>89</
 
math>
		<english>90</english>
	</name>
	<name>
		<alias>李四</alias>
		<math>92</math>
		<english>87</english>
	</name>
	<name>
		<alias>王五</alias>
		<math>95</math>
		<english>90</english>
	</name>
 

</score>

程式碼:

//請自行新增到HTML檔案進行相應嘗試
<script>
        window.onload=function useScoreXml(){
            var xmlFile="./score.xml";
            var xmlDoc=loadXML(xmlFile);
            var scoreList=xmlDoc.documentElement.getElementsByTagName("name");
            document.
 
write("<table>");
            for(var i=0;i<scoreList.length;i++)
            {
                document.write("<tr>");
                var attList=scoreList[i].childNodes;
                for(var j=0;j<attList.length;j++)
                {
                    document.write("<td>"+attList[j].text+"</td>");
                }
                document.write("</tr>");
            }
        }

        //讀取XML檔案,只支援IE
        function loadXML(xmlFile) {
            var xmlDoc;
            xmlDoc= new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.load(xmlFile);
            return xmlDoc;
        }
 </script>

實際執行結果：

2、編寫程式，修改下面的XML檔案Book.xml，要求：
（1）為每一個book元素新增一個author子元素，元素內容自定。
（2）修改title元素的值，在文字內容的後面新增文字“（電子工業出版社）”。

例如：
<title> Java面向物件程式設計</title>      變為：
<title> Java面向物件程式設計（電子工業出版社）</title>

（3）刪除原有的第三個元素。
（4）為每一個book元素新增一個category屬性子元素，元素內容自定，如：
（5）使用DOM介面，javascript語言實現。
book.xml

<?xml version="1.0" encoding="utf-8" ?>
<books>
	<book>
		<title>Java面向物件程式設計</title>
		<author>孫衛琴</author>
	</book>
	<book>
		<title>JSP動態網頁程式設計技術</title>
		<author>李偉民</author>
	</book>
	<book>
		<title>精通Hibernate</title>
		<author>劉洋</author>
	</book>
</books>

程式碼:

//請新增到相應的HTML檔案進行嘗試
<script>
        window.onload=function useBookXml(){
            var xmlFile="./Book.xml";
            var xmlDoc=loadXML(xmlFile);
            var x=xmlDoc.documentElement;
            var bookList=xmlDoc.getElementsByTagName("book");
            for(var i=0;i<bookList.length;i++)
            {
                //為每一個book元素新增一個author子元素
                var newNode=xmlDoc.createElement("author");
                var textNode=xmlDoc.createTextNode("The Second Author Bai");
                newNode.appendChild(textNode);
                bookList[i].appendChild(newNode);

                //修改title元素的值
                // var NewNode=xmlDoc.createElement("book");
                var newtextNode=xmlDoc.getElementsByTagName("title")[i].text+"(電子工業出版社)";
                // var newTitle=xmlDoc.createElement("title");
                // newTitle.appendChild(newtextNode);
                // NewNode.appendChild(newTitle);
                bookList[i].childNodes[0].text=newtextNode;
                // x.replaceChild(NewNode,y);

                //刪除第三個元素
                if(i==2){
                    var y=bookList[i];
                    y.parentNode.removeChild(y);
                }

                //新增屬性
                bookList[i].setAttribute("category","computer");
            }
            //重新載入陣列
            var bookList=xmlDoc.getElementsByTagName("book");
            document.write("<table>");
            for(var i=0;i<bookList.length;i++)
            {
                document.write("<tr>");
                var attList=bookList[i].childNodes;
                for(var j=0;j<attList.length;j++)
                {
                    document.write("<td>"+attList[j].text+"</td>");
                }
                document.write("<td>"+"category屬性："+bookList[i].getAttribute("category")+"</td>");
                document.write("</tr>");
            }
        }

        //讀取XML檔案,只支援IE
        function loadXML(xmlFile) {
            var xmlDoc;
            xmlDoc= new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.load(xmlFile);
            return xmlDoc;
        }

    </script>

執行結果：