收藏622
分享
阅读1852
更新时间2025-07-30
DOM 定义了访问和操作文档的标准：
“W3C 文档对象模型 (DOM) 是一个与平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。”
HTML DOM 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档呈现为树结构。
XML DOM 定义了访问和操作 XML 文档的标准方法。它将 XML 文档呈现为树结构。
对于任何使用 HTML 或 XML 的人来说，理解 DOM 是必需的。
所有 HTML 元素都可以通过 HTML DOM 访问。
此例更改 id="demo" 的 HTML 元素的值：
<h1 id="demo">这是标题</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
运行实例 »点击 "运行实例" 按钮查看在线实例
此例更改 HTML 文档中第一个 <h1> 元素的值：
<h1>这是标题</h1>
<h1>这是标题</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
运行实例 »点击 "运行实例" 按钮查看在线实例
注意：即使 HTML 文档仅包含一个 <h1> 元素，您仍然必须指定数组索引 [0]，因为 getElementsByTagName() 方法始终返回数组。
您可以在我们的 JavaScript 教程中学习更多有关 HTML DOM 的内容。
所有 XML 元素都可以通过 XML DOM 访问。
XML DOM 是：
换句话说：XML DOM 是关于如何获取、更改、添加或删除 XML 元素的标准。
此例检索 XML 文档中第一个 <title> 元素的文本值：
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
下例中使用的 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 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" 这个动作）。
这些是一些典型的 DOM 属性：
注释：在上面的列表中，x 是一个节点对象。
注释：在上面的列表中，x 是一个节点对象。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习
