XML DOM 教程

什么是 DOM？

DOM 定义了访问和操作文档的标准：

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

HTML DOM 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档呈现为树结构。

XML DOM 定义了访问和操作 XML 文档的标准方法。它将 XML 文档呈现为树结构。

对于任何使用 HTML 或 XML 的人来说，理解 DOM 是必须的。

HTML DOM

所有 HTML 元素都可以通过 HTML DOM 访问。

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

示例

<h1 id="demo">This is a Heading</h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

亲自试一试 »

此示例更改 HTML 文档中第一个 <h1> 元素的值：

示例

<h1>This is a Heading</h1>

<h1>This is a Heading</h1>

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

亲自试一试 »

笔记：即使 HTML 文档仅包含一个 <h1> 元素，您仍然必须指定数组索引 [0]，因为 getElementsByTagName() 方法始终返回一个数组。

您可以在我们的文章中了解有关 HTML DOM 的更多信息JavaScript 教程。

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 文件是书籍.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>

亲自试一试 »

示例解释

XML文档- 解析器创建的 XML DOM 对象。
getElementsByTagName("title")[0]- 获取第一个<title>元素
子节点[0]- <title> 元素的第一个子元素（文本节点）
节点值- 节点的值（文本本身）

加载 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 的编程接口由一组标准属性和方法定义。

特性通常被称为“is”（即节点名是"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(姓名) - 获取具有指定标签名称的所有元素
x.appendChild(节点) - 向 x 插入一个子节点
x.removeChild(节点) - 从 x 中删除一个子节点

笔记：在上面的列表中，x 是一个节点对象。