什么是 DOM？
DOM 定义了访问和操作文档的标准：
“W3C 文档对象模型 (DOM) 是一个与平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。”
HTML DOM 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档呈现为树结构。
XML DOM 定义了访问和操作 XML 文档的标准方法。它将 XML 文档呈现为树结构。
对于任何使用 HTML 或 XML 的人来说，理解 DOM 是必需的。
HTML DOM
所有 HTML 元素都可以通过 HTML DOM 访问。
例子 1
此例更改 id="demo" 的 HTML 元素的值：
这是标题
运行实例 »点击 "运行实例" 按钮查看在线实例
例子 2
此例更改 HTML 文档中第一个
元素的值：
这是标题
这是标题
运行实例 »
点击 "运行实例" 按钮查看在线实例
注意：即使 HTML 文档仅包含一个
元素，您仍然必须指定数组索引 [0]，因为 getElementsByTagName() 方法始终返回数组。
您可以在我们的 JavaScript 教程中学习更多有关 HTML DOM 的内容。
XML DOM
所有 XML 元素都可以通过 XML DOM 访问。
XML DOM 是：
- XML 的标准对象模型
- XML 的标准编程接口
- 独立于平台和语言
- W3C 标准
换句话说：XML DOM 是关于如何获取、更改、添加或删除 XML 元素的标准。
获取 XML 元素的值
此例检索 XML 文档中第一个
元素的文本值：</p>
<h3>实例</h3>
<pre class="language-js">
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</pre>
<section>
<h2>加载 XML 文件</h2>
<p>下例中使用的 XML 文件是 books.xml。</p>
<p>此例将 "books.xml" 读入 xmlDoc 并检索 books.xml 中第一个 <title> 元素的文本值：</p>
<h3>实例</h3>
<pre class="language-js">
<!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>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<h4>例子解释</h4>
<ol>
<li><code>xmlDoc</code> - 由解析器创建的 XML DOM 对象</li>
<li><code>getElementsByTagName("title")[0]</code> - 获取第一个 <title> 元素</li>
<li><code>childNodes[0]</code> - <title> 元素的第一个子节点（文本节点）</li>
<li><code>nodeValue</code> - 节点的值（文本本身）</li>
</ol>
<section>
<h2>加载 XML 字符串</h2>
<p>此例将文本字符串加载到 XML DOM 对象中，并使用 JavaScript 从中提取信息：</p>
<h3>实例</h3>
<pre class="language-js">
<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃" +
"梁实秋" +
"2013" +
"";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
