XML - DOM

文件物件模型 (DOM) 是 XML 的基礎。XML 文件具有稱為“節點”的資訊單元層次結構；DOM 是一種描述這些節點及其之間關係的方法。

DOM 文件是一組以層次結構組織的節點或資訊部分。此層次結構允許開發人員瀏覽樹狀結構，查詢特定資訊。DOM 基於資訊層次結構，因此被稱為“基於樹”。

另一方面，XML DOM 還提供了一個 API，允許開發人員在樹中新增、編輯、移動或刪除節點，以便建立應用程式。

示例

以下示例 (sample.htm) 將 XML 文件 (“address.xml”) 解析成 XML DOM 物件，然後透過 JavaScript 提取其中的一些資訊 −

<!DOCTYPE html>
<html>
   <body>
      <h1>TutorialsPoint DOM example </h1>
      <div>
         <b>Name:</b> <span id = "name"></span><br>
         <b>Company:</b> <span id = "company"></span><br>
         <b>Phone:</b> <span id = "phone"></span>
      </div>
      <script>
         if (window.XMLHttpRequest)
         {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
         }
         else
         {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/xml/address.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         document.getElementById("name").innerHTML=
            xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
         document.getElementById("company").innerHTML=
            xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
         document.getElementById("phone").innerHTML=
            xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
      </script>
   </body>
</html>

address.xml 的內容如下 −

<?xml version = "1.0"?>
<contact-info>
   <name>Tanmay Patil</name>
   <company>TutorialsPoint</company>
   <phone>(011) 123-4567</phone>
</contact-info>

現在，讓我們繼續在同一目錄 /xml 中儲存這兩個檔案 sample.htm 和 address.xml，然後透過在任何瀏覽器中開啟 sample.htm 檔案來執行該檔案。應該會產生以下輸出。

在這裡，您可以看到如何提取每個子節點來顯示其值。

列印頁面

上一個

下一個