在本章中,我们将讨论XML DOM Traversing.我们在上一章中研究了如何加载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","https://img01.yuandaxia.cn/Content/img/tutorials/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()的元素数组(带标记元素).
接下来,我们遍历此数组并在表中显示子节点值.
在服务器路径上将此文件另存为 traverse_example.html (此文件和node.xml应位于服务器的同一路径上).您将收到以下输出 :