Javascript操作XML文档
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsSolutions._Default" %><!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 runat="server"> <title>客户端操作XML文档</title> <script> //该函数将从指定的URL装载XML文档，在装载完毕时，把该文档和URL传递给指定的处理函数。 //任何XML文档都可以使用该函数。 function loadXML(url, handler)
{
debugger; //如果它受支持，则采用标准的2级DOM技术。 if (document.implementation && document.implementation.createDocument)
{
//创建新的Document对象。 var xmldoc = document.implementation.createDocument("", "", null); //设置装载完毕时发生的情况。 xmldoc.onload = function() {handler(xmldoc, url); } //告诉它装载什么URL。 xmldoc.load(url); 
} //否则，用Microsoft公司专用的用于Internet Explorer的API。 else if (window.ActiveXObject) { var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); //创建文档 xmldoc.onreadystatechange = function() { //设置onload if (xmldoc.readyState == 4) handler(xmldoc, url); } xmldoc.load("xmlFile.xml"); }
} //该函数将从传递给它的XML文档读取的数据建立一个雇员HTML表。 function makeTable(xmldoc, url) { debugger; //创建一个<table>对象，并把它插入文档 var table = document.createElement("table"); table.setAttribute("border", "1"); document.body.appendChild(table); //用HTMLTableElement和相关接口的方法定义表的标题和表头，给每个列命名。 var caption = "Employee Data from " + url; table.createCaption().appendChild(document.createTextNode(caption)); var header = table.createTHead(); var headerrow = header.insertRow(0); headerrow.insertCell(0).appendChild(document.createTextNode("Name")); headerrow.insertCell(1).appendChild(document.createTextNode("Job")); headerrow.insertCell(2).appendChild(document.createTextNode("Salary")); //下面找到xmldoc文档中的所有<employee>元素。 var employees = xmldoc.getElementsByTagName("employee"); //遍历这些<employee>元素。 for (var i = 0; i < employees.length; i++) { //对于每个雇员，用标准DOM方法获取名字、工作和薪水数据。 //名字来自一个HTML性质。其它值来自<job>和<salary>标记中的Text节点。 var e = employees[i]; var name = e.getAttribute("name"); debugger; var job = e.getElementsByTagName("job")[0].firstChild.data; var salary = e.getElementsByTagName("salary")[0].firstChild.data; //既然我们已经有了雇员的数据，便可以用表的方法创建一个新行， //用行的方法创建一个新表元，用Text节点存放这些数据。 var row = table.insertRow(i+1); row.insertCell(0).appendChild(document.createTextNode(name)); row.insertCell(1).appendChild(document.createTextNode(job)); row.insertCell(2).appendChild(document.createTextNode(salary)); } } //测试一下createTextNode函数 function fnChangeNode(){ var oTextNode = document.createTextNode("New Text"); var oReplaceNode = oSpan.childNodes(0); oReplaceNode.replaceNode(oTextNode); } //loadXML(location.search.substring(1), makeTable); </script></head><body onload="loadXML('Source
', makeTable);"> <form id="form1" runat="server"> <div> <SPAN ID="oSpan" onclick="fnChangeNode()"> Original Text </SPAN> </div> </form></body></html>XML文件如下：
<?xml version="1.0" encoding="utf-8" ?>
<root>
<employee name="xuweidong">
<job>
初级程序员
</job>
<salary>
9999
</salary>
</employee>
<employee name="daidingguo">
<job>
高级程序员
</job>
<salary>
8888
</salary>
</employee>
</root>
