用JavaScript语言通过DOM遍历XML文档

傷城~ 2022-05-29 01:14 209阅读 0赞

实验结果要求如下：

![Image 1][]

解决步骤:

<table> 
 <tbody> 
  <tr> 
   <td><p>1、&nbsp; 首先是布局，左边用表格比较方便，右边是个div块。</p> <p>2、&nbsp; 嵌入JavaScript脚本，由易到难，写定义全部显示的功能函数、显示姓名功能函数，显示属性功能函数。再定义查询、添加、删除功能块。</p> <p>3、&nbsp; 在定义函数之前，先定义IE浏览器读取XML文件的语句。</p> <p>var xmlDoc=new ActiveXObject("Msxml2.DOMDocument"); </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xmlDoc.async = false; </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xmlDoc.load("Students.xml");</p> <p>4、&nbsp; xmlDoc.documentElement是”学生名单节点”.childNodes是”学生节点”</p> <p>5、&nbsp; nextsibling是”下一个兄弟节点”</p> <p>6、&nbsp; root.getElementsByTagName("姓名");是得到兄弟节点</p> <p>7、&nbsp; getAttribute("爱好");是得到属性节点</p> <p>8、&nbsp; 建立节点如下：</p> <p>var studentSet = xmlDoc.createElement("学生");&nbsp; //建立学生节点</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentID = xmlDoc.createElement("学号");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentName = xmlDoc.createElement("姓名");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentSex = xmlDoc.createElement("性别");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentMajor = xmlDoc.createElement("专业");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentMath = xmlDoc.createElement("Math");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentEnglish = xmlDoc.createElement("English");</p> <p>9、&nbsp; studentID.appendChild(xmlDoc.createTextNode(sidInput.value));//为学生节点赋值</p> <p>10、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; studentSet.appendChild(studentID);//为学生节点加入子节点。</p> <p>11、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; removeChild(stuNode);删除学生节点。</p> <p>&nbsp;</p></td> 
  </tr> 
 </tbody> 
</table>

文件如下：

students.xml

<?xml version="1.0" encoding="GB2312"?>
    <学生名单>
      <学生>
        <学号>201501110101</学号>
        <姓名 爱好="足球">张三</姓名>
        <性别>男</性别>
        <专业>软件工程</专业>
        <数学>85</数学>
        <英语>90</英语>
      </学生>
      <学生>
        <学号>201501110102</学号>
        <姓名 爱好="篮球">李四</姓名>
        <性别>女</性别>
        <专业>软件工程</专业>
        <数学>92</数学>
        <英语>75</英语>
      </学生>
      <学生>
        <学号>201501110103</学号>
        <姓名>王五</姓名>
        <性别>男</性别>
        <专业>软件工程</专业>
        <数学>79</数学>
        <英语>88</英语>
      </学生>
      <学生>
        <学号>201501110104</学号>
        <姓名  爱好="音乐">赵六</姓名>
        <性别>男</性别>
        <专业>软件工程</专业>
        <数学>79</数学>
        <英语>88</英语>
      </学生>
      <学生>
        <学号>201501110105</学号>
        <姓名>刘七</姓名>
        <性别>女</性别>
        <专业>软件工程</专业>
        <数学>90</数学>
        <英语>74</英语>
      </学生>
      <学生>
        <学号>201501110106</学号>
        <姓名 爱好="上网">张君宝</姓名>
        <性别>男</性别>
        <专业>软件工程</专业>
        <数学>91</数学>
        <英语>67</英语>
      </学生>
      <学生>
        <学号>201501110107</学号>
        <姓名>崔春晓</姓名>
        <性别>女</性别>
        <专业>软件工程</专业>
        <数学>70</数学>
        <英语>83</英语>
      </学生>
      <学生>
        <学号>201501110108</学号>
        <姓名>倪冰</姓名>
        <性别>女</性别>
        <专业>软件工程</专业>
        <数学>91</数学>
        <英语>76</英语>
      </学生>
     <学生>
        <学号>201501110109</学号>
        <姓名>杨惠</姓名>
        <性别>女</性别>
        <专业>软件工程</专业>
        <数学>78</数学>
        <英语>90</英语>
      </学生>
      <学生>
      <学号>201501110110</学号>
        <姓名 爱好="音乐">李中华</姓名>
        <性别>男</性别>
        <专业>软件工程</专业>
        <数学>98</数学>
        <英语>79</英语>
      </学生>
      <学生>
      <学号>201501110201</学号>
        <姓名>张越</姓名>
        <性别>男</性别>
        <专业>网络工程</专业>
        <数学>85</数学>
        <英语>97</英语>
      </学生>
      <学生>
      <学号>201501110202</学号>
        <姓名>秦水天</姓名>
        <性别>男</性别>
        <专业>网络工程</专业>
        <数学>52</数学>
        <英语>76</英语>
      </学生>
      <学生>
      <学号>201501110203</学号>
        <姓名>张名扬</姓名>
        <性别>男</性别>
        <专业>网络工程</专业>
        <数学>50</数学>
        <英语>69</英语>
      </学生>
      <学生>
      <学号>201501110204</学号>
        <姓名>张楚越</姓名>
        <性别>男</性别>
        <专业>网络工程</专业>
        <数学>82</数学>
        <英语>77</英语>
      </学生>
      <学生>
      <学号>201501110205</学号>
        <姓名  爱好="上网">林子默</姓名>
        <性别>女</性别>
        <专业>网络工程</专业>
        <数学>95</数学>
        <英语>86</英语>
      </学生>
      <学生>
        <学号>201501110206</学号>
        <姓名  爱好="看电视">李子涵</姓名>
        <性别>女</性别>
        <专业>网络工程</专业>
        <数学>77</数学>
        <英语>88</英语>
      </学生>
    </学生名单>

用JavaScript语言通过DOM遍历XML文档.htm

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>		
    <script type="text/javascript" src="loadxmldoc.js"></script>		
    	</head>
    <body>
    		<h1>实验8 JavaScript DOM操作XML显示查询添加删除</h1>
    		<table  cellpadding="0" cellspacing="0">
    			<tr>
    				<td align="right">请输入学号：</td>
    				<td><input  type="text"  id="sid" /></td>
    				<td>       <input  type="button" value="全部显示" οnclick="showAll()" /></td>
    				<td><input  type="button" value="显示姓名" οnclick="showName()"/></td>
    				<td><input  type="button" value="显示属性" οnclick="showAttribute()"/></td>
    			</tr>
    			<tr>
    				<td align="right">姓名：</td>
    				<td><input type="text"  id="name" /></td>
    				<td colspan="3" rowspan="6"><div style="width: 400px;height: 400px; background: yellow; float: left; margin-left: 20px; margin-top: 20px" id="showArea" ></div> </td>
    			</tr>
    			<tr>
    				<td align="right">性别：</td>
    				<td><input  type="text" id="sex"/></td>
    			</tr>
    			<tr>
    				<td align="right">专业：</td>
    				<td><input  type="text" id="major"/></td>
    			</tr>
    			<tr>
    				<td align="right">数学：</td>
    				<td><input type="text" id="Math"/></td>
    			</tr>
    			<tr>
    				<td align="right">英语：</td>
    				<td><input  type="text" id="English"/></td>
    			</tr>
    			<tr>
    				<td align="right">
    					<input  type="button" value="查询" οnclick="queryName()" />
    				</td>
    				<td>
    					    <input type="button" value="添加" οnclick="studentAdd()" />
    					    <input type="button" value="删除" οnclick="studentDelete()" />
    				</td>
    			</tr>
    		</table>
    	</body>
    			<script>
    			var xmlDoc=new ActiveXObject("Msxml2.DOMDocument"); 
    			xmlDoc.async = false; 
    			xmlDoc.load("Students.xml");
    			
    			function showAll(){		
    			var root = xmlDoc.documentElement;			//全部显示功能块
    			var first = root.childNodes[0];
    			var content = first.text+"<br>"; 
    			var next = first.nextSibling; 	
    			while(next != null){ 
    				content += next.text+"<br />"; 
    				next = next.nextSibling; 
    			} 
    			document.getElementById("showArea").innerHTML = content;
    			}
    
    			
    		
    
    		function showName(){					//显示姓名功能块
    			 var content="";
    			 var root=xmlDoc.documentElement;
    			 var studentlist=root.getElementsByTagName("姓名");
    			 for(var i=0;i<studentlist.length;i++){
    			 	content+=studentlist[i].childNodes[0].nodeValue+"<br />";	
    				content+=studentlist[i].text+"<br />";					
    			 }
    			document.getElementById("showArea").innerHTML=content;
    		}
    
    		function showAttribute(){								//显示爱好属性功能块
    			var content="";
    			var root=xmlDoc.documentElement;
    			var studentlist=root.getElementsByTagName("姓名");
    			for(var i=0;i<studentlist.length;i++){
    			 	var hobby=studentlist[i].getAttribute("爱好");
    			 	if(hobby!=null)
    			 		content+=studentlist[i].text+"的爱好是:"+hobby+"<br />";					 	
    			 }
    			 
    			if(content==null){
    				alert("未找到爱好信息");
    				return;
    			}
    			document.getElementById("showArea").innerHTML=content;		
    			
    			
    	
    		}
    
    		function queryName(){
    				var userInput=document.getElementById("name");			//查询姓名功能
    				if(userInput.value=="")
    				{
    					alert("请输入姓名!");
    					return;
    				}
    				var result="";
    				var oList=xmlDoc.documentElement.childNodes;
    				for(var i=0;i<oList.length;i++){
    					var node=xmlDoc.documentElement.childNodes[i];
    					if(userInput.value==node.childNodes[1].text){
    						result=node.text;
    						break;
    					}
    				}
    					if(result!=""){
    						alert(result);
    					}else{
    						alert("未找到符合条件的同学");
    					}
    			}
    
    		function studentAdd(){										//添加功能块
    			var sidInput=document.getElementById("sid");
    			var nameInput=document.getElementById("name");
    			var sexInput=document.getElementById("sex");
    			var majorInput=document.getElementById("major");
    			var MathInput=document.getElementById("Math");
    			var EnglishInput=document.getElementById("English");
    			
    			var studentSet = xmlDoc.createElement("学生");
    			var studentID = xmlDoc.createElement("学号");
    			var studentName = xmlDoc.createElement("姓名");
    			var studentSex = xmlDoc.createElement("性别");
    			var studentMajor = xmlDoc.createElement("专业");
    			var studentMath = xmlDoc.createElement("Math");
    			var studentEnglish = xmlDoc.createElement("English");
    
    			studentID.appendChild(xmlDoc.createTextNode(sidInput.value));
    			studentName.appendChild(xmlDoc.createTextNode(nameInput.value));
    			studentSex.appendChild(xmlDoc.createTextNode(sexInput.value));
    			studentMajor.appendChild(xmlDoc.createTextNode(majorInput.value));
    			studentMath.appendChild(xmlDoc.createTextNode(MathInput.value));
    			studentEnglish.appendChild(xmlDoc.createTextNode(EnglishInput.value)); 
    
    	        studentSet.appendChild(studentID);  
    	        studentSet.appendChild(studentName);  
    	        studentSet.appendChild(studentSex);  
    	        studentSet.appendChild(studentMajor); 
    			studentSet.appendChild(studentMath);  
    	        studentSet.appendChild(studentEnglish);
    			var parent = xmlDoc.selectSingleNode("/学生名单");  
    	        if(parent.hasChildNodes()){     
    	           parent.insertBefore(studentSet,parent.firstChild);     
    	          }else{     
    	           parent.appendChild(studentSet);     
    	          } 
    			}
    		
    		function studentDelete(){									//删除功能块
    				var userInputTextBox = document.getElementById("sid");
     	            var userInputID = userInputTextBox.value;
     	            if (userInputID == "") {
     	                alert("请输入学生学号！");
     	                return;
     	            }
     	            var stu = xmlDoc.selectSingleNode("学生名单/学生/学号[text()='" + userInputID + "']");
     	            if (stu == null) {
     	                alert("未找到学号为“" + userInputID + "”的同学！");
     	                return;
     	            }
     	            var root = xmlDoc.documentElement;
     	            var stuNode = stu.parentNode;
     	            root.removeChild(stuNode);
     	            document.getElementById("name").value = "";
     	            document.getElementById("sex").value = "";
     	            document.getElementById("major").value = "";
     	            document.getElementById("Math").value = "";
     	            document.getElementById("English").value = "";
     	            alert("您已成功删除了学号为“" + userInputID + "”的同学！");
     	           	ShowAll();
    	}		
    	</script>
    </html>

显示结果如下：

<table> 
 <tbody> 
  <tr> 
   <td><p>全部显示：</p> <p><img alt=""></p> <p>显示姓名：</p> <p><img alt=""></p> <p>显示属性：</p> <p><img alt=""></p> <p>查询按钮：</p> <p><img alt=""></p> <p>添加按钮：</p> <p><img alt=""><br></p> <p>删除按钮：</p> <p><img alt=""></p> <p>点击全部显示后该学号同学消失：</p> <p><img alt=""><br></p></td> 
  </tr> 
 </tbody> 
</table>

注意：本实验仅仅用IE浏览器运行方可，其他浏览器不予执行；如果使用的是firefox，那么firefox有专门的加载DOM语法。

<table> 
 <tbody> 
  <tr> 
   <td><p>1、&nbsp; 在定义函数之前，先<strong><span style="color:#ff0000;">定义IE浏览器读取XML文件的语句。</span></strong></p> <p><span style="color:#33ff33;">var xmlDoc=new ActiveXObject("Msxml2.DOMDocument"); </span></p> <p><span style="color:#33ff33;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xmlDoc.async = false; </span></p> <p><span style="color:#33ff33;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xmlDoc.load("Students.xml");</span></p> <p>2、&nbsp; xmlDoc.documentElement是”学生名单节点”.childNodes是”学生节点”</p> <p>3、&nbsp; nextsibling是”下一个兄弟节点”</p> <p>4、&nbsp; root.getElementsByTagName("姓名");是得到兄弟节点</p> <p>5、&nbsp; getAttribute("爱好");是得到属性节点</p> <p>6、&nbsp; 建立节点如下：</p> <p>var studentSet = xmlDoc.createElement("学生");&nbsp; //建立学生节点</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentID = xmlDoc.createElement("学号");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentName = xmlDoc.createElement("姓名");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentSex = xmlDoc.createElement("性别");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentMajor = xmlDoc.createElement("专业");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentMath = xmlDoc.createElement("Math");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var studentEnglish = xmlDoc.createElement("English");</p> <p>7、&nbsp; studentID.appendChild(xmlDoc.createTextNode(sidInput.value));//为学生节点赋值</p> <p>8、&nbsp; studentSet.appendChild(studentID);//为学生节点加入子节点。</p> <p>9、&nbsp; removeChild(stuNode);删除学生节点。</p> <p>&nbsp;</p></td> 
  </tr> 
 </tbody> 
</table>

[Image 1]: