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