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 是一个节点对象。