返回首页
当前位置: 主页 > 编程语言 > XML教程 >

XML DOM-遍历

时间:2020-07-07 11:27来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

在本章中,我们将讨论XML DOM遍历。上一章中,我们研究了如何加载XML文档并解析由此获得的DOM对象。可以遍历此解析的DOM对象。遍历是一个过程,其中通过逐步遍历节点树中的每个元素,以系统的方式完成循环。

以下示例(traverse_example.htm)演示了DOM遍历。在这里,我们遍历<Employee>元素的每个子节点。

<!DOCTYPE html>
<html>
   <style>
      table,th,td {
         border:1px solid black;
         border-collapse:collapse
      }
   </style>
   <body>
      <div id = "ajax_xml"></div>
      <script>
         //if browser supports XMLHttpRequest
         if (window.XMLHttpRequest) {// Create an instance of XMLHttpRequest object. 
            code for IE7+, Firefox, Chrome, Opera, Safari
            var xmlhttp = new XMLHttpRequest();
         } else {// code for IE6, IE5
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         // sets and sends the request for calling "node.xml"
            xmlhttp.open("GET","/dom/node.xml",false);
            xmlhttp.send();

         // sets and returns the content as XML DOM
            var xml_dom = xmlhttp.responseXML;
	
         // this variable stores the code of the html table
            var html_tab = '<table id = "id_tabel" align = "center">
            <tr>
               <th>Employee Category</th>
               <th>FirstName</th>
               <th>LastName</th>
               <th>ContactNo</th>
               <th>Email</th>
            </tr>';
            var arr_employees = xml_dom.getElementsByTagName("Employee");
         // traverses the "arr_employees" array
            for(var i = 0; i<arr_employees.length; i++) {
               var employee_cat = arr_employees[i].getAttribute('category');
   
               // gets the value of 'category' element of current "Element" tag

               // gets the value of first child-node of 'FirstName' 
               // element of current "Employee" tag
                  var employee_firstName =
                     arr_employees[i].getElementsByTagName('FirstName')[0].childNodes[0].nodeValue;

               // gets the value of first child-node of 'LastName' 
               // element of current "Employee" tag
                  var employee_lastName =
                     arr_employees[i].getElementsByTagName('LastName')[0].childNodes[0].nodeValue;

               // gets the value of first child-node of 'ContactNo' 
               // element of current "Employee" tag
                  var employee_contactno = 
                     arr_employees[i].getElementsByTagName('ContactNo')[0].childNodes[0].nodeValue;

               // gets the value of first child-node of 'Email' 
               // element of current "Employee" tag
                  var employee_email = 
                     arr_employees[i].getElementsByTagName('Email')[0].childNodes[0].nodeValue;

               // adds the values in the html table
               html_tab += '<tr>
                  <td>'+ employee_cat+ '</td>
                  <td>'+ employee_firstName+ '</td>
                  <td>'+ employee_lastName+ '</td>
                  <td>'+ employee_contactno+ '</td>
                  <td>'+ employee_email+ '</td>
               </tr>';
            }
         html_tab += '</table>'; 
         // adds the html table in a html tag, with id = "ajax_xml"
         document.getElementById('ajax_xml').innerHTML = html_tab; 
      </script>
   </body>
</html>
  • 此代码加载node.xml

  • XML内容被转换为JavaScript XML DOM对象。

  • 使用方法getElementsByTagName()获得元素数组(带有标签Element)。

  • 接下来,我们遍历此数组并将子节点值显示在表中。

执行

将此文件另存为traverse_example.html在服务器路径上(此文件和node.xml应在服务器上的同一路径上)。您将收到以下输出-

XML DOM遍历
 上一页  打印页面

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • XML DOM-导航

    到目前为止,我们研究了DOM结构,如何加载和解析XML DOM对象以及如何遍历DOM对象。 在...

  • XML DOM-遍历

    在本章中,我们将讨论XML DOM遍历。 在 上一章 中,我们研究了 如何加载XML文档并解析...

  • XML DOM-载入中

    在本章中,我们将研究XML 加载 和 解析 。 为了描述API提供的接口,W3C使用一种称为接...

  • XML DOM-方法

    作为API的DOM包含表示可以在XML文档中找到的不同类型信息的接口,例如元素和文本。 这...

  • XML DOM-节点树

    在本章中,我们将研究XML DOM 节点树。 在XML文档中,信息以分层结构维护; 这种分层...

  • XML DOM-节点

    在本章中,我们将研究XML DOM 节点 。 每个XML DOM都以称为 节点的 层次结构单元包含...

猜你感兴趣