XML DOM-トラバース

この章では、XML DOM Traversingについて説明します。リンク：/dom/xml_dom_loading [前の章]で、XMLドキュメントをロードし、このようにして取得したDOMオブジェクトを解析する方法を学びました。この解析されたDOMオブジェクトはトラバースできます。トラバースとは、ノードツリー内のすべての要素を段階的に処理することにより、体系的にループを実行するプロセスです。

例

次の例（traverse_example）は、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>

このコードはlink：/dom/node.xml [node.xml]をロードします。
XMLコンテンツはJavaScript XML DOMオブジェクトに変換されます。
メソッドgetElementsByTagName（）を使用して、要素の配列（タグElementを含む）が取得されます。
次に、この配列を走査し、子ノードの値を表に表示します。

実行

このファイルを_traverse_examplel_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。次の出力が表示されます-

XML DOMトラバース

Dom-xml-dom-traversing

XML DOM-トラバース

例

実行