XML DOM 教程
什麼是 DOM？
DOM 定義了一個訪問和操作文件的標準
"W3C 文件物件模型 (DOM) 是一個平臺和語言無關的介面，它允許程式和指令碼動態地訪問和更新文件的內容、結構和樣式。"
HTML DOM 定義了訪問和操作 HTML 文件的標準方式。它將 HTML 文件呈現為樹形結構。
XML DOM 定義了訪問和操作 XML 文件的標準方式。它將 XML 文件呈現為樹形結構。
理解 DOM 是任何處理 HTML 或 XML 的人必須掌握的。
HTML DOM
所有 HTML 元素都可以透過 HTML DOM 訪問。
此示例更改 id="demo" 的 HTML 元素的值
示例
<h1 id="demo">這是一個標題</h1>
<script>
document.getElementById("demo").innerHTML = "你好，世界!";
</script>
自己動手試一試 »
此示例更改 HTML 文件中第一個 <h1> 元素的值
示例
<h1>這是一個標題</h1>
<h1>這是一個標題</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "你好，世界!";
</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>
自己動手試一試 »
示例解釋
- xmlDoc - 解析器建立的 XML DOM 物件。
- getElementsByTagName("title")[0] - 獲取第一個 <title> 元素
- childNodes[0] - <title> 元素的第一個子節點（文字節點）
- nodeValue - 節點的值（文字本身）
載入 XML 字串
此示例將文字字串載入到 XML DOM 物件中，並使用 JavaScript 從中提取資訊
示例
<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</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 是一個節點物件。
