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

原创

wx637f0ba1ddc42 2022-11-24 15:21:34 博主文章分类：xml ©著作权

©著作权归作者所有：来自51CTO博客作者wx637f0ba1ddc42的原创作品，请联系作者获取转载授权，否则将追究法律责任

实验结果要求如下：

用JavaScript语言通过DOM遍历XML文档_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);删除学生节点。