javascript操作xml(增删改查)例子代码hta版

包括了stu.hta(是HTML应用程序);
stu.xml
注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!

文件stu.hta代码如下:

 
<html> 
<head> 
<title> 数据岛的显示　</title> 
<style type="text/css"> 
#findPanel 
{ 
position:absolute; 
width:220px; 
border:1px solid #666666; 
} 
#findPanelTitle 
{ 
height:10px; 
background-color:#336699; 
cursor:move; 
} 
#findPanelContent 
{ 
padding:5px 5px 5px 5px; 
background-color:#6699CC; 
} 
</style> 
</head> 
<body> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument"); 
xmlDoc.async = false; 
xmlDoc.resolveExternals = false; 
xmlDoc.load("stu.xml"); 
//alert(xmlDoc.xml); 
//显示数据 
function show(){ 
var vbo = document.getElementById("s").value; 
if(vbo=="显示学生信息"){ 
document.getElementById('info').style.visibility='visible'; 
document.getElementById("s").value="隐藏学生信息"; 
}else{ 
document.getElementById('info').style.visibility='hidden'; 
document.getElementById("s").value="显示学生信息"; 
} 
} 
//查找 
function que(){ 
document.getElementById("ad").style.visibility="visible"; 
document.getElementById("qmd").style.visibility="visible"; 
} 
/** 
* 解析XML文件函数 
* @param xmlDoc XML对象 
* @param name 属性名称 格式如:user.name 
*/ 
function getXMLProperty(xmlDoc, name) { 
var keys = name.split('.'); 
var node = xmlDoc.documentElement; 
for(var i=0; i<keys.length; i++) { 
var childs = node.childNodes; 
var key = keys[i]; 
for(var k=0; k<childs.length; k++) { 
var child = childs[k]; 
if(child.nodeName == key) { 
if(child.childNodes.length == 1) { 
return child.text; 
} else { 
node = child; 
break; 
} 
} 
} 
} 
return ""; 
} 
//返回父节点(通过节点名字和节点值) 
function getNod(nam,val){ 
var node = xmlDoc.documentElement; 
var childs = node.childNodes; 
for (var i=0;i<childs.length ;i++ ) 
{ 
var child = childs[i]; 
var childms = child.childNodes; 
for(var k=0;k<childms.length;k++){ 
var childm = childms[k]; 
if(childm.nodeName == nam && (childm.text).substring(0,6)==val){ 
//alert(val); 
return child; 
} 
} 
} 
return ''; 
} 
//通过父节点和子节点名返回子节点值 
function getNodVal(nods,nam){ 
var childms = nods.childNodes; 
for(var k=0;k<childms.length;k++){ 
var childm = childms[k]; 
if(childm.nodeName == nam){ 
//alert(childm.text); 
return childm.text; 
} 
} 
return ''; 
} 
//通过父节点和子节点名返回子节点 
function getCurNod(nods,nam){ 
var childms = nods.childNodes; 
for(var k=0;k<childms.length;k++){ 
var childm = childms[k]; 
if(childm.nodeName == nam){ 
//alert(childm.text); 
return childm; 
} 
} 
return ''; 
} 
//开始查找 
function query(){ 
var renum = /^\d{5}$/; 
if(renum.exec(xh.value)){ 
if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){ 
var nod = getNod('学号',xh.value); 
//getNodVal(nod,'姓名'); 
//getNodVal(nod,'性别'); 
//getNodVal(nod,'籍贯'); 
/*document.getElementById("xm").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text; 
document.getElementById("xb").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text; 
document.getElementById("jg").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text; 
document.getElementById("xh").disabled="true"; */ 
document.getElementById("xm").value=getNodVal(nod,'姓名'); 
document.getElementById("xb").value= getNodVal(nod,'性别'); 
document.getElementById("jg").value= getNodVal(nod,'籍贯'); 
}else{ 
alert("该学号还没有被占用!"); 
} 
}else{ 
alert("学号非法!学号5位数字!"); 
return false; 
} 
} 
//修改 
function mod(){ 
if(info_check()){ 
if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){ 
if(confirm("确认修改？")){ 
var nod = getNod('学号',xh.value); 
getCurNod(nod,'姓名').text=xm.value; 
getCurNod(nod,'性别').text=xb.value; 
getCurNod(nod,'籍贯').text=jg.value; 
/* 
xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text=xm.value; 
xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text=xb.value; 
xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text=jg.value; 
*/ 
saveXML(); 
//document.getElementById("xh").disabled="false"; 
document.getElementById("xh").value=""; 
document.getElementById("xm").value=""; 
document.getElementById("xb").value=""; 
document.getElementById("jg").value=""; 
document.getElementById("ad").style.visibility="hidden"; 
document.getElementById("qmd").style.visibility="hidden"; 
alert("修改成功!"); 
location.reload(); 
} 
}else{ 
alert("该学号还没有被占用!请按学号查询再进行修改!"); 
return false; 
} 
} 
} 
//新增学生 
function add(){ 
var vadd = document.getElementById("add").value; 
if(vadd=="新增"){ 
document.getElementById("xh").value=""; 
document.getElementById("xm").value=""; 
document.getElementById("xb").value=""; 
document.getElementById("jg").value=""; 
document.getElementById("qmd").style.visibility="hidden"; 
document.getElementById('info').style.visibility='hidden'; 
document.getElementById("s").value="显示学生信息"; 
document.getElementById("ad").style.visibility="visible"; 
document.getElementById("add").value="保存"; 
document.getElementById("can").style.visibility="visible"; 
}else{ 
if(info_check()){ 
add_node(); 
saveXML(); 
document.getElementById("xh").value=""; 
document.getElementById("xm").value=""; 
document.getElementById("xb").value=""; 
document.getElementById("jg").value=""; 
document.getElementById("ad").style.visibility="hidden"; 
document.getElementById("qmd").style.visibility="hidden"; 
document.getElementById("add").value="新增"; 
alert("新增成功!"); 
location.reload(); 
} 
} 
} 
//删除学生 
function del(){ 
var renum = /^\d{5}$/; 
if(renum.exec(document.getElementById("xh").value)){ 
if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){ 
if(confirm("确认删除？")){ 
/*var node = xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]"); 
if(node.hasChildNodes()){ 
var kids = node.childNodes; 
for(var i=0;i<kids.length;i++){ 
del(); 
} 
} 
node.parentNode.removeChild(node); 
*/ 
var nod = getNod('学号',xh.value); 
nod.parentNode.removeChild(nod); 
saveXML(); 
can(); 
alert("删除成功!"); 
location.reload(); 
} 
}else{ 
alert("该学号还没有被占用!请按学号查询再进行修改!"); 
return false; 
} 
}else{ 
alert("学号非法!为5位数字!"); 
return false; 
} 
} 
//取消新增 
function can(){ 
document.getElementById("xh").value=""; 
document.getElementById("xm").value=""; 
document.getElementById("xb").value=""; 
document.getElementById("jg").value=""; 
document.getElementById("ad").style.visibility="hidden"; 
document.getElementById("can").style.visibility="hidden"; 
document.getElementById("qmd").style.visibility="hidden"; 
document.getElementById("add").value="新增"; 
} 
//增加结点 
function add_node(){ 
var oxh = xmlDoc.createElement("学号"); 
oxh.appendChild(xmlDoc.createTextNode(xh.value)); 
var oxm = xmlDoc.createElement("姓名"); 
oxm.appendChild(xmlDoc.createTextNode(xm.value)); 
var oxb = xmlDoc.createElement("性别"); 
oxb.appendChild(xmlDoc.createTextNode(xb.value)); 
var ojg = xmlDoc.createElement("籍贯"); 
ojg.appendChild(xmlDoc.createTextNode(jg.value)); 
var oxs = xmlDoc.createElement("学生"); 
oxs.appendChild(oxh); 
oxs.appendChild(oxm); 
oxs.appendChild(oxb); 
oxs.appendChild(ojg); 
var parent = xmlDoc.selectSingleNode("/学生管理"); 
if(parent.hasChildNodes()) { 
parent.insertBefore(oxs,parent.firstChild); 
}else{ 
parent.appendChild(oxs); 
} 
} 
//保存XML 
function saveXML(){ 
xmlDoc.save("stu.xml"); 
} 
//验证新增数据 
function info_check(){ 
var renum = /^\d{5}$/; 
var rec = /^[\u4E00-\u9FA5]{2,5}$/; 
if(!renum.exec(document.getElementById("xh").value)){ 
alert("学号非法!为5位数字!"); 
return false; 
} 
if(!rec.exec(xm.value)){ 
alert("姓名非法!只能是中文最少两个字,最多不得超过5个字!"); 
return false; 
} 
//alert(xb.value!="男"); 
switch(xb.value){ 
case "男":break; 
case "女":break; 
default:alert("性别只能是\"男\"或\"女\"!"); return false; 
} 
if(!rec.exec(jg.value)){ 
alert("籍贯非法!只能是中文最少两个字,最多不得超过5个字!！"); 
return false; 
} 
return true; 
} 
//--> 
</SCRIPT> 
<input id="s" type=button value="显示学生信息" onclick="show();"> 
<input id="que" type=button value="精确查询" onclick="que();"> 
<input id="add" type=button value="新增" onclick="add();"> 
<input id="can" type=button value="取消" onclick="can();" style="visibility:hidden"> 
<br> 
<center> 
<div id="ad" style="visibility:hidden"> 
<table><tr><td>学号: 
<input type=text id="xh" style="ime-mode:disabled" size=5 maxlength=5 onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"><!-- style 用于光闭输入法 onKeyPress 只能输入数字--> 
</td><td>姓名: 
<input type=text id="xm" size=10 maxlength=5> 
</td><td>性别: 
<input type=text id="xb" size=5 maxlength=5> 
</td><td>籍贯: 
<input type=text id="jg" size=10 maxlength=5> 
</td> 
</tr> 
</table> 
</div> 
<div id="qmd" style="visibility:hidden"> 
<table> 
<tr align="center"> 
<td></td> 
<td><input id="que" type=button value="查询" onclick="query();"></td> 
<td><input id="mod" type=button value="修改" onclick="mod();"></td> 
<td><input id="del" type=button value="删除" onclick="del();"></td> 
</tr> 
</table> 
</div> 
</center> 
<div id="findPanel"> 
<div id="findPanelTitle">可拖动</div> 
<div id="findPanelContent"> 
<input type="text" size="20" value="a" id="key" onkeydown="javascript:ChckSubmit(event);"> 
<input type="button" value="查找" onclick="javascript:OnKeySubmit();"> 
</div> 
</div> 
<script language="javascript"> 
<!-- 
var findPanel = document.getElementById("findPanel"); 
var findPanelTitle = document.getElementById("findPanelTitle"); 
var findPanelContent = document.getElementById("findPanelContent"); 
var findPanel_orgnX = 50; 
var findPanel_orgnY = 50; 
//设置物件位置 
findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX; 
findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY; 
//================================================================================ 
var foundCnt = 0; //已经找到了的结果的数量 
//查找入口函数 
function Find(key) 
{ 
if (key == "") 
{ 
return; 
} 
if (document.all) 
{ 
IEFind(key); 
} 
else 
{ 
NSFind(key); 
} 
} 
//浏览器为 IE 系列 
function IEFind(key) 
{ 
var rng = document.body.createTextRange(); 
var found = false; 
for (var i=0; i<=foundCnt && (found=rng.findText(key)); i++) 
{ 
rng.moveStart("character", 1); //找到，后移一位以查找下一个 
} 
if (found) 
{ 
rng.moveStart("character", -1); 
rng.findText(key); 
rng.select(); 
rng.scrollIntoView(); 
foundCnt++; 
} 
else 
{ 
if (foundCnt > 0) 
{ 
//已经查找一遍，找到有符合条件的结果，重新开始查找 
foundCnt = 0; 
IEFind(key); 
} 
else 
{ 
//已经查找一遍，没有找到符合条件的结果 
alert("文档搜索完毕。"); 
} 
} 
} 
//浏览器为 NS 系列 
function NSFind(key) 
{ 
if (window.find(key)) 
{ 
foundCnt++; 
} 
else 
{ 
var found = false; 
while (window.find(key, false, true)) 
{ 
found = true; 
} 
if (found) 
{ 
//已经查找一遍，找到有符合条件的结果，重新查找也已经开始 
foundCnt = 1; 
} 
else 
{ 
//已经查找一遍，没有找到符合条件的结果 
alert("文档搜索完毕。"); 
} 
} 
} 
function OnKeySubmit() 
{ 
var key = document.getElementById("key"); 
Find(key.value); 
} 
function ChckSubmit(e) 
{ 
if (e.keyCode == 13) 
{ 
OnKeySubmit(); 
} 
} 
//================================================================================ 
function RePosFindPanel() 
{ 
findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX; 
findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY; 
} 
document.body.onscroll = RePosFindPanel; 
document.body.onresize = RePosFindPanel; 
//================================================================================ 
//拖拽过程中相关变量 
var draging = false; //是否处于拖拽中 
var offsetX = 0; //X方向左右偏移量 
var offsetY = 0; //Y方向上下偏移量 
//准备拖拽 
function BeforeDrag() 
{ 
if (event.button != 1) 
{ 
return; 
} 
offsetX = document.body.scrollLeft + event.clientX-findPanel.style.pixelLeft; 
offsetY = document.body.scrollTop + event.clientY-findPanel.style.pixelTop; 
draging = true; 
} 
//拖拽中 
function OnDrag() 
{ 
if(!draging) 
{ 
return; 
} 
//更新位置 
findPanel_orgnX = event.clientX-offsetX; 
findPanel_orgnY = event.clientY-offsetY; 
event.returnValue = false; 
findPanel.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX; 
findPanel.style.pixelTop = document.body.scrollTop + event.clientY-offsetY; 
} 
//结束拖拽 
function EndDrag() 
{ 
if (event.button != 1) 
{ 
return; 
} 
draging = false; 
} 
findPanelTitle.onmousedown = BeforeDrag; 
document.onmousemove = OnDrag; 
findPanelTitle.onmouseup = EndDrag; 
//--> 
</script> 
<xml id="stu" src="stu.xml"> 
</xml> 
<center> 
<div id="info" style="visibility:hidden"> 
<table DATASRC=#stu border=1 style="background-color:#a9eeef; Border-color 
:red;" > 
<caption><h2>学生信息管理</h2></caption> 
<thead>　 
<th>学号</th> 
<th>姓名</th>　　 
<th>性别</th>　　 
<th>籍贯</th>　 
</thead>　 
<tr>　 
<td>　　 
<div DATAFLD="学号">　　 
</td>　　 
<td>　　 
<div DATAFLD="姓名"> 
</td>　　 
<td>　　 
<div DATAFLD="性别">　　 
</td>　　 
<td>　　 
<div DATAFLD="籍贯">　 
</td>　 
</tr>　 
</table> 
</div> 
</center> 
</body> 
</html> 

xml文件如下(stu.xml)

复制代码代码如下:

 
<?xml version="1.0" encoding="gb2312"?> 
<学生管理> 
<学生> 
　<学号>97001</学号> 
　<姓名>王五</姓名> 
　<性别>男 </性别> 
　<籍贯>上海</籍贯> 
</学生> 
<学生> 
　<学号>97002</学号> 
　<姓名>李四 </姓名> 
　<性别>男 </性别> 
　<籍贯>浙江 </籍贯> 
</学生> 
<学生> 
　 <学号>97006 </学号> 
　 <姓名>张三 </姓名> 
　 <性别>男</性别> 
　 <籍贯>浙江</籍贯> 
</学生> 
</学生管理> 