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

本文介绍了一个使用HTA文件实现的学生信息管理系统,通过JavaScript进行XML文件读取、展示、查询、修改、添加及删除等操作。代码展示了如何利用DOM模型进行节点创建、选取和修改,并实现了简单的用户界面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文件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    </学号>
  <姓名>张三 </姓名>
  <性别>男</性别>
  <籍贯>浙江</籍贯>
 </学生>
</学生管理>

 

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") 'JAVASCRIPT中的创建对象 set objXml=CreateObject("Microsoft.XMLDOM") '创建解析器对象 objXml.async="false" objXml.load("test.xml") '装载xml文件 objXml.load(Server.MapPath("test.xml")) '根据绝对路径装载xml文件 Set objRootsite = xmlDoc.getElementsByTagName("NewList") '查找某一节点"NewList" objNextRootsiteName = xmlDoc.getElementsByTagName("NewList").item(0).nodeName Set objRootsite = objXml.documentElement.selectSingleNode("NewList") '查找某一节点"NewList" document.write(objRootsite.nodeName) '当前节点名称 objNextRootsite = objRootsite.childNodes.item(1) '查找"NewList"的第一子节点 objNextRootsiteText = objNextRootsite.childNodes.item(1).text '查找"NewList"的第一子节点的节点内容 xmlChildNode = objXml.documentElement.childNodes '获取当前节点 document.Write (xmlChildNode.nodename) '当前节点名称 document.write (xmlChildNode.text) '当前节点文本内容 frm.label.innerText = xmlChildNode.item(1).text '将Xml中的文本内容转换为Html中的内容 xmlChildNode.GetAttributeNode("name").Nodevalue '获取属性名为name的属性值 xmlChildNode.length 'xmlChildNode节点的子节点数量 '取出一个节点的属性集合 set objnodes=objXml.documentElement.SelectSingleNode("//people/man").GetAttributeNode("name").attributes for each element in objnodes response.write element.nodename '属性名 response.write element.nodevalue '属性值 next xmlDoc.getElementsByTagName("from").item(0).text xmlDoc.removeChild objRootsite '删除某个节点 objXml.parseError '错误接受容器 objXml.parseError.errorCode '返回长整型错误代码 objXml.parseError.reason '返回字符串型错误原因 objXml.parseError.line '返回长整型错误行号 objXml.parseError.linePos '返回长整型错误行字符位置 objXml.parseError.srcText '返回错误所在行的源代码 objXml.parseError.url '返回url装载文档指针---最近一份含有解析错误的XML文档的URL地址 objXml.parseError.filePos '返回长整型错误文件位置---在文档中的绝对字符位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值