XML DOM 教程

什么是 DOM？

DOM 定義了訪問和操作文檔的標準：

“W3C 文檔對象模型 (DOM) 是一個與平臺和語言無關的接口，允許程序和腳本動態訪問和更新文檔的內容、結構和樣式。”

HTML DOM 定義了訪問和操作 HTML 文檔的標準方法。它將 HTML 文檔呈現為樹結構。

XML DOM 定義了訪問和操作 XML 文檔的標準方法。它將 XML 文檔呈現為樹結構。

對于任何使用 HTML 或 XML 的人來說，理解 DOM 是必需的。

HTML DOM

所有 HTML 元素都可以通過 HTML DOM 訪問。

例子 1

此例更改 id="demo" 的 HTML 元素的值：

<h1 id="demo">這是標題</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

親自試一試

例子 2

此例更改 HTML 文檔中第一個 <h1> 元素的值：

<h1>這是標題</h1>
<h1>這是標題</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

親自試一試

注意：即使 HTML 文檔僅包含一個 <h1> 元素，您仍然必須指定數組索引 [0]，因為 getElementsByTagName() 方法始終返回數組。

您可以在我們的 JavaScript 教程中學習更多有關 HTML DOM 的內容。

XML DOM

所有 XML 元素都可以通過 XML DOM 訪問。

XML DOM 是：

  • XML 的標準對象模型
  • XML 的標準編程接口
  • 獨立于平臺和語言
  • W3C 標準

換句話說：XML DOM 是關于如何獲取、更改、添加或刪除 XML 元素的標準。

獲取 XML 元素的值

此例檢索 XML 文檔中第一個 <title> 元素的文本值：

實例

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

加載 XML 文件

下例中使用的 XML 文件是 books.xml。

此例將 "books.xml" 讀入 xmlDoc 并檢索 books.xml 中第一個 <title> 元素的文本值：

實例

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>

親自試一試

例子解釋

  1. xmlDoc - 由解析器創建的 XML DOM 對象
  2. getElementsByTagName("title")[0] - 獲取第一個 <title> 元素
  3. childNodes[0] - <title> 元素的第一個子節點（文本節點）
  4. nodeValue - 節點的值（文本本身）

加載 XML 字符串

此例將文本字符串加載到 XML DOM 對象中，并使用 JavaScript 從中提取信息：

實例

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍談吃</title>" +
"<author>梁實秋</author>" +
"<year>2013</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

親自試一試

編程接口

DOM 將 XML 建模為一組節點對象。可以使用 JavaScript 或其他編程語言訪問節點。在本教程中，我們使用 JavaScript。

DOM 的編程接口由一組標準屬性和方法定義。

屬性通常指的是事情是什么（比如 nodename 是 "book"）。

方法通常指的是可以做什么事情（比如刪除 "book" 這個動作）。

XML DOM 屬性

這些是一些典型的 DOM 屬性：

  • x.nodeName - x 的名稱
  • x.nodeValue - x 的值
  • x.parentNode - x 的父節點
  • x.childNodes - x 的子節點
  • x.attributes - x 的屬性節點

注釋：在上面的列表中，x 是一個節點對象。

XML DOM 方法

  • x.getElementsByTagName(name) - 獲取擁有指定標簽名稱的所有元素
  • x.appendChild(node) - 向 x 插入一個子節點
  • x.removeChild(node) - 從 x 中刪除子節點

注釋：在上面的列表中，x 是一個節點對象。