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

最新推荐文章于 2022-11-25 17:11:46 发布
最新推荐文章于 2022-11-25 17:11:46 发布
阅读量5.6k 收藏 8
点赞数 2
分类专栏： xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pshdhx/article/details/79554290
版权

实验结果要求如下：

    

解决步骤:

1、  首先是布局，左边用表格比较方便，右边是个div块。

2、  嵌入JavaScript脚本，由易到难，写定义全部显示的功能函数、显示姓名功能函数，显示属性功能函数。再定义查询、添加、删除功能块。

3、  在定义函数之前，先定义IE浏览器读取XML文件的语句。

var xmlDoc=new ActiveXObject("Msxml2.DOMDocument");

                     xmlDoc.async = false;

               xmlDoc.load("Students.xml");

4、  xmlDoc.documentElement是”学生名单节点”.childNodes是”学生节点”

5、  nextsibling是”下一个兄弟节点”

6、  root.getElementsByTagName("姓名");是得到兄弟节点

7、  getAttribute("爱好");是得到属性节点

8、  建立节点如下：

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");

9、  studentID.appendChild(xmlDoc.createTextNode(sidInput.value));//为学生节点赋值

10、          studentSet.appendChild(studentID);//为学生节点加入子节点。

11、          removeChild(stuNode);删除学生节点。

 

文件如下：

    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>

显示结果如下：

    

全部显示：

显示姓名：

显示属性：

查询按钮：

添加按钮：


删除按钮：

点击全部显示后该学号同学消失：



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

1、  在定义函数之前，先定义IE浏览器读取XML文件的语句。

var xmlDoc=new ActiveXObject("Msxml2.DOMDocument");

                     xmlDoc.async = false;

               xmlDoc.load("Students.xml");

2、  xmlDoc.documentElement是”学生名单节点”.childNodes是”学生节点”

3、  nextsibling是”下一个兄弟节点”

4、  root.getElementsByTagName("姓名");是得到兄弟节点

5、  getAttribute("爱好");是得到属性节点

6、  建立节点如下：

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");

7、  studentID.appendChild(xmlDoc.createTextNode(sidInput.value));//为学生节点赋值

8、  studentSet.appendChild(studentID);//为学生节点加入子节点。

9、  removeChild(stuNode);删除学生节点。

 




使用javascript遍历XML文件并显示
03-05
博文链接：https://clarancepeng.iteye.com/blog/147326
dom遍历所有xml节点，并且重新生成xml
08-08
NULL 博文链接：https://oudeyong.iteye.com/blog/2145690
使用 javascript 遍历 xmlDom
xwhoyeah
02-20 239
[code="java"] 使用 javascript 遍历 xmlDom. index.html ssssssss index.html ssssssssssssssss parse1 parse2 function parse1(){ var xml =...
Dom遍历XML文件
qq_52426874的博客
06-24 221
<?xml version="1.0" encoding="utf-8"?> <PhoneInfo> <Brand name="华为"> <Type name="U8650"/> <Type name="HW123"/> <Type name="HW321"/> </Brand> <Brand name="苹果"> <.
【转帖】AJAX开发简略续一
zero2learn的专栏
11-22 1181
在前一篇文章《AJAX开发简略》中，我们讲述了如何用AJAX来改进设计的用户体验。接下来，我们将讲述如何用AJAX来更新文档，以及处理服务器返回的XML文档。我们的最终目的是接收服务器的返回信息，修改当前文档的内容。是时候让重要人物--DOM粉墨登场了。7.4、文档对象模型（DOM）文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般
ajax遍历xml文档的方法
10-23
使用W3C DOM，开发者可以遍历XML文档中的各个元素，并对其进行读取、修改或删除。DOM解析器把XML文档转换成树状结构（DOM tree），每个节点代表XML文档中的一个部分。通过节点可以进行一系列操作，比如访问节点、...
javascript先序遍历DOM树的方法
10-22
DOM树是根据HTML或XML文档所构建的一个树状结构，它代表了文档的结构，让开发者可以通过JavaScript来访问和修改文档的内容、结构以及样式。遍历DOM树是操作DOM的基本方式之一，其中先序遍历是一种常用的遍历方式，它...
Javascript里使用Dom操作Xml
10-31
JavaScript通过DOM（Document Object Model）可以非常方便地操作XML文档。本文将详细介绍如何在JavaScript中使用DOM来操作XML。 #### 二、IXMLDOMDocument / DOMDocument简介 **IXMLDOMDocument** 和 **DOM...
JavaScript遍历XML总结
weixin_30687587的博客
03-30 179
1：读取服务器端xml（注意不同浏览器版本的区别），使用XML可以增强系统的扩展性，只用修改XML就可以实现增加减少功能的目的。 functionloadXMLDoc1(dname){ if(window.XMLHttpRequest){ xhttp=newXMLHttpRequest(); ...
js遍历xml,json学习
12-05
js遍历xml 遍历json学习
JavaScript实现读取与输出XML文件数据的方法示例
10-18
主要介绍了JavaScript实现读取与输出XML文件数据的方法,结合实例形式分析了JavaScript基于ActiveXObject实现载入、读取与输出xml文件数据的相关操作技巧,需要的朋友可以参考下
JS操作XMLDOM(遍历和打印)
04-11
NULL 博文链接：https://angrycoder.iteye.com/blog/1682943
js 加载 xml 及遍历属性及内容 整理
weixin_30371469的博客
04-05 277
以下例子为 加载xml 并读取属性及内容 1 function inidata() 2 3 { 4 5 var xmlDoc; 6 //加载xml 7 xmlDoc = loadXMLDoc("negativeData.xml"); 8 9 var htmlstr = new Array(); 10 //解析 11 var Negs...
使用js对xml进行迭代遍历
iaiuhe的专栏
08-05 1057
我的理解
XML DOM - DOMParser 对象
Roger★L☆M☆J★
08-06 1326
 解析 XML 标记来创建一个文档。构造函数new DOMParser()说明DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法：var doc = (new DOMParser()).parseFromStrin
原生JS遍历XML节点属性并转json
最新发布
u012119819的博客
11-25 628
原生JS遍历XML节点属性并转json
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值