DOM 实例：深入理解文档对象模型

引言

文档对象模型（DOM，Document Object Model）是处理可扩展标记语言（XML）的标准编程接口。在网页开发中，DOM 被广泛应用于 HTML 和 XML 文档的交互。本文将深入探讨 DOM 的概念、实例及其在网页编程中的应用。

DOM 基础概念

什么是 DOM？

DOM 是一种跨平台和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在网页中，DOM 通常用来表示 HTML 或 XML 文档。

DOM 树结构

DOM 将文档表示为树形结构，其中每个节点代表文档的一部分。例如，HTML 文档中的每个元素、属性和文本都对应于树中的一个节点。

DOM 实例解析

创建和修改元素

通过 DOM，可以轻松地创建新元素并修改现有元素。例如，可以使用 JavaScript 创建一个新的段落元素并添加到网页中：

// 创建新的段落元素
var newParagraph = document.createElement("p");// 设置段落文本
newParagraph.textContent = "这是一个新段落。";// 将新段落添加到文档主体
document.body.appendChild(newParagraph);

查询和操作元素

DOM 还允许查询文档中的元素，并对它们进行操作。例如，可以获取文档中所有类名为 "example" 的元素，并更改它们的背景颜色：