javascript操作xml(增删改查)例子代码
自己做了一个小东西，不是很好，但是对初学来说是一个不错的例子!
包括了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); } }//保存XMLfunction 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 </学号> <姓名>张三 </姓名> <性别>男</性别> <籍贯>浙江</籍贯> </学生></学生管理>
var parent = xmlDoc.selectSingleNode("/学生管理");if(parent.hasChildNodes()) { //这里报错 parent.insertBefore(oxs,parent.firstChild); }else{ parent.appendChild(oxs); }
很急呀，往回复！谢谢。