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

实验结果要求如下：

解决步骤:

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语言通过DOM遍历XML文档相关推荐

java使用org.w3c.dom解析XML文档，创建、增删查改，保存，读取，遍历元素等操作
全栈工程师开发手册 (作者:栾鹏) java教程全解 java使用org.w3c.dom(java dom)解析XML文档,创建.增删查改,保存,读取,遍历元素等操作在保存文件时需要载入crimso ...
【Qt】DOM读取XML文档
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. XML文档示例 04. DOM读取XML文档内容 05. 预留 06. 附录 01. 概述 DOM(Document Ob ...
[Qt教程] 第27篇 XML（一）使用DOM读取XML文档
[Qt教程] 第27篇 XML(一)使用DOM读取XML文档楼主发表于 2013-5-21 21:14:28 | 查看: 1001| 回复: 14 使用DOM读取XML文档版权声明该文章原创 ...
php循环获取xml节点,PHP_PHP遍历XML文档所有节点的方法，本文实例讲述了PHP遍历XML文档 - phpStudy...
PHP遍历XML文档所有节点的方法本文实例讲述了PHP遍历XML文档所有节点的方法.分享给大家供大家参考.具体实现方法如下: 1. contact.xml代码: J J J Manager Nati ...
java w3c xml_org.w3c.dom(java dom)解析XML文档
首先来了解点Java DOM 的 API: 1.解析器工厂类:DocumentBuilderFactory 创建的方法:DocumentBuilderFactory dbf = DocumentBui ...
JAVA中利用DOM解析XML文档
JAVA中利用DOM解析XML文档 package org.sws.utils; import java.io.File;import java.io.IOException; import java ...
java jdom进行xml的增删改差_java使用DOM对XML文档进行增删改查操作实例代码
本文研究的主要是java使用DOM对XML文档进行增删改查操作的相关代码,具体实例如下所示. 源代码: package com.zc.homeWork18; import java.io.File; ...
[Perl]利用XML::DOM生成XML文档
Perl的XML::DOM功能很强大,利用它可以轻易地分析XML文档,也可以建立XML文档. 常用的类包括: XML::DOM::Node:所有类的基类,表示一个XML节点. XML::DOM::Pa ...
VBS脚本学习：遍历XML文档
一.脚本源码使用VBS脚本遍历XML文件 Option Explicit '定义常量 Const NodeElement = 1 '元素 Const NodeText = 3 '文本 Const N ...

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

用JavaScript语言通过DOM遍历XML文档相关推荐

最新文章

热门文章