XML DOM - 導航

到目前為止，我們學習了 DOM 結構，如何載入和解析 XML DOM 物件以及遍歷 DOM 物件。在這裡，我們將瞭解如何在 DOM 物件中節點之間進行導航。XML DOM 包含節點的各種屬性，這些屬性可以幫助我們遍歷節點，例如：

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

以下是節點樹的示意圖，顯示了它與其他節點的關係。

DOM - 父節點

此屬性將父節點指定為節點物件。

示例

以下示例 (navigate_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件。然後，透過子節點導航到父節點：

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         var y = xmlDoc.getElementsByTagName("Employee")[0];
         document.write(y.parentNode.nodeName);
      </script>
   </body>
</html>

如上例所示，子節點 Employee 導航到其父節點。

執行

將此檔案另存為伺服器路徑上的 navigate_example.html（此檔案和 node.xml 應位於伺服器上的同一路徑）。在輸出中，我們得到 Employee 的父節點，即 Company。

第一個子節點

此屬性的型別為 Node，表示 NodeList 中存在的第一個子節點名稱。

示例

以下示例 (first_node_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，然後導航到 DOM 物件中存在的第一個子節點。

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_firstChild(p) {
            a = p.firstChild;

            while (a.nodeType != 1) {
               a = a.nextSibling;
            }
            return a;
         }
         var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(firstchild.nodeName);
      </script>
   </body>
</html>

函式 get_firstChild(p) 用於避免空節點。它有助於從節點列表中獲取 firstChild 元素。
x = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]) 獲取標籤名稱為 Employee 的第一個子節點。

執行

將此檔案另存為伺服器路徑上的 first_node_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。在輸出中，我們得到 Employee 的第一個子節點，即 FirstName。

最後一個子節點

此屬性的型別為 Node，表示 NodeList 中存在的最後一個子節點名稱。

示例

以下示例 (last_node_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，然後導航到 xml DOM 物件中存在的最後一個子節點。

<!DOCTYPE html>
  <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_lastChild(p) {
            a = p.lastChild;

            while (a.nodeType != 1){
               a = a.previousSibling;
            }
            return a;
         }
         var lastchild = get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(lastchild.nodeName);
      </script>
   </body>
</html>

執行

將此檔案另存為伺服器路徑上的 last_node_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。在輸出中，我們得到 Employee 的最後一個子節點，即 Email。

下一個兄弟節點

此屬性的型別為 Node，表示下一個子節點，即 NodeList 中存在的指定子元素的下一個兄弟節點。

示例

以下示例 (nextSibling_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，該物件立即導航到 xml 文件中存在的下一個節點。

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         }
         else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_nextSibling(p) {
            a = p.nextSibling;

            while (a.nodeType != 1) {
               a = a.nextSibling;
            }
            return a;
         }
         var nextsibling = get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
         document.write(nextsibling.nodeName);
      </script>
   </body>
</html>

執行

將此檔案另存為伺服器路徑上的 nextSibling_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。在輸出中，我們得到 FirstName 的下一個兄弟節點，即 LastName。

上一個兄弟節點

此屬性的型別為 Node，表示上一個子節點，即 NodeList 中存在的指定子元素的上一個兄弟節點。

示例

以下示例 (previoussibling_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，然後導航到 xml 文件中最後一個子節點之前的節點。

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_previousSibling(p) {
            a = p.previousSibling;

            while (a.nodeType != 1) {
               a = a.previousSibling;
            }
            return a;
         }

         prevsibling = get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
         document.write(prevsibling.nodeName);
      </script>
   </body>
</html>

執行

將此檔案另存為伺服器路徑上的 previoussibling_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。在輸出中，我們得到 Email 的上一個兄弟節點，即 ContactNo。

列印頁面