JavaScript操作XML

废话不多说代码如下 包含了Js 对 xml 的 增、 删 、 改 、 查

 

要处理的xml：

<?xml version="1.0" encoding="utf-8"?>
<students>
	<student id="001" class="2班">
		<name>令狐冲</name>
		<age>20</age>
		<sex>男</sex>
	</student>
	<student id="002" class="1班">
		<name>任盈盈</name>
		<age>18</age>
		<sex>女</sex>
	</student>
</students>

 js 代码如下：

 

// JavaScript Document

//domDoc:文档模型对象
var domDoc = null;

//root:文档模型根对象
var root = null;

//userAgentFlag:客户端浏览器类型标识
var userAgentFlag = null;

//MSXMLVerArr:IE浏览器支持的MSXML控件名称
var MSXMLVerArr = ["Msxml2.DOMDocument.5.0",
				   "Msxml2.DOMDocument.4.0",
				   "Msxml2.DOMDocument.3.0",
				   "Msxml2.DOMDocument",
				   "Microsoft.XmlDom"];

//判断用户浏览器类型
function getUserAgent(){
	var userAgent = navigator.userAgent;
	alert(userAgent);
	if(userAgent.indexOf("IE") != -1){
		return "IE";	
	}
	if(userAgent.indexOf("Firefox")!=-1){
		alert("ok");
	  return "Firefox";
	}
}

function init(){
alert("1111");
  	getDomDoc();	
	domDoc.load("StudentXML.xml");
	root = domDoc.documentElement;	
    alert(root);
	addStu();
	updateStu();
    deleteStu();
}

//获取文件对象模型
function getDomDoc(){
	userAgentFlag = getUserAgent();
	alert(userAgentFlag);
	switch(userAgentFlag){
		case "IE":
			for(var i=0;i<MSXMLVerArr.length;i++){
				try{
					domDoc = new ActiveXObject(MSXMLVerArr[i]);
					break;
				}catch(e){
					continue;
				}	
			}
			break;
		case "Firefox":
		   domDoc = document.implementation.createDocument("","",null);
		   alert("da");
		   break;
	}
	if(domDoc){
	//设置文档对象的异步属性成false 保证文档对象在加载xml文件完成
	//之前，解析器不在继续执行脚本内容
		domDoc.async = false;
	}
}

//添加一个学生信息
function addStu(){
	var xmlStusNode = null;
	var xpathEL = "/students";
	switch(userAgentFlag){
			case "IE":
				xmlStusNode = root.selectNodes(xpathEL).item(0);
				break;
			case "Firefox":
			    var xpe = new XPathEvaluator();
				var nsResolver = xpe.createNSResolver(root);
				alert("ok"+domDoc);
				alert(nsResolver);
				
				xmlStusNode = domDoc.evaluate(xpathEL,domDoc,nsResolver,XPathResult.ANY_TYPE,null).iterateNext();
				alert("oksssssss");
				break;
			default:
				break;
		}		
	//创建新的节点student
	var xmlStuNode = domDoc.createElement("student");
	
	//为新的节点增加id属性，属性值是003
	xmlStuNode.setAttribute("id","003");
	//为新的节点增加class属性，属性值是"3班"
	xmlStuNode.setAttribute("class","0801班");
	
	//创建孙节点name
	var xmlNameNode = domDoc.createElement("name");
	
	//创建孙节点age
	var xmlAgeNode = domDoc.createElement("age");
	
	//创建孙节点sex
	var xmlSexNode = domDoc.createElement("sex");
	
	switch(userAgentFlag){
		
		  case "IE":
			xmlNameNode.text = "wangyalei";
	                xmlSexNode.text = "男";
			xmlAgeNode.text = "21";
				break;
			case "Firefox":
			        xmlNameNode.textContent="wangyalei";
					xmlSexNode.textContent= "男";
					xmlAgeNode.textContent= "21";
				break;
			default:
				break;
		}
	//将孙节点name添加到student上
	xmlStuNode.appendChild(xmlNameNode);
	
	//将孙节点age添加到student上
	xmlStuNode.appendChild(xmlAgeNode);
	

	//将孙节点sex添加到student上
	xmlStuNode.appendChild(xmlSexNode);
	
	//将新节点student添加到原有的Students节点上
	xmlStusNode.appendChild(xmlStuNode);
	alert("添加成功");
	document.write(domDoc.xml);
	alert(domDoc.xml);// firefox 不支持 此方法
}


function updateStu(){
	
	//获得特定的name节点
	var xpathEL= "//student[@id='002']/age";
	
     switch(userAgentFlag){
			case "IE":
				xmlStusNode = root.selectNodes(xpathEL).item(0);
                               xmlStusNode.text = "20";
				break;
			case "Firefox":
			    var xpe = new XPathEvaluator();
				var nsResolver = xpe.createNSResolver(root);
				alert("ok"+domDoc);
				alert(nsResolver);
				
				xmlStusNode = domDoc.evaluate(xpathEL,domDoc,nsResolver,XPathResult.ANY_TYPE,null).iterateNext();
				xmlStusNode.textContent= "20";
				break;
			default:
				break;
		}		

	
	document.writeln("----------------修改成功后的内容---------------------->");

     alert("修改成功");
	document.writeln(domDoc.xml);
	alert(domDoc.xml);// firefox 不支持 此方法
}

//删除学生信息
function deleteStu(){
	//获得编号为002的student节点
	var xpathEL = "//student[@id='002']";
	  switch(userAgentFlag){
			case "IE":
				xmlStusNode = root.selectNodes(xpathEL).item(0);
                  break;
			case "Firefox":
			    var xpe = new XPathEvaluator();
				var nsResolver = xpe.createNSResolver(root);
				xmlStusNode = domDoc.evaluate(xpathEL,domDoc,nsResolver,XPathResult.ANY_TYPE,null).iterateNext();
				break;
			default:
				break;
	  }
	  
	//获得002student节点下的name属性节点
	var xmlNameNode = xmlStusNode.childNodes[0];
	//删除name属性节点
	xmlStusNode.removeChild(xmlNameNode);
	//输出xml文件以便测试
	document.writeln("----------------删除成功后的内容---------------------->");
	  alert("删除成功");
    document.writeln(domDoc.xml);
	//保存到文件，但是ie的安全策略不会允许脚本直接写文件的
//	domDoc.save("StudentXML.xml"); 
}

 

页面调用：

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Js操作XMl</title>
<script type="text/javascript" language="javascript" src="Test.js"></script>
</head>
    <body onload="init()">
</body>
</html>

 

以上就是对js对xml的常规处理