文档对象模型（Document Object Model，简称 DOM）是浏览器解析 HTML 或 XML 文档后生成的编程接口。它将文档表示为由节点和对象组成的树形结构，使开发者能够使用脚本语言（如 JavaScript）动态地访问和修改文档的内容、结构和样式。 citeturn0search1

DOM 的作用

通过 DOM，开发者可以：

  • 访问和修改元素：获取特定的元素，读取或更改其内容和属性。
  • 操作结构：添加、删除或移动节点，改变文档的结构。
  • 处理事件：为元素绑定事件处理程序，响应用户的交互。

例如，使用 JavaScript 可以改变页面中某个元素的文本内容：

document.getElementById("example").textContent = "新的内容";

DOM 的层次结构

DOM 将文档表示为树形结构，其中每个节点代表文档的一部分。主要的节点类型包括：

  • 文档节点：整个文档的根节点。
  • 元素节点：HTML 或 XML 标签，如 <p>、<div> 等。
  • 文本节点：元素或属性中的文本内容。
  • 属性节点：元素的属性，如 class、id 等。
  • 注释节点：文档中的注释部分。

例如，以下简单的 HTML 结构：

<!DOCTYPE html>
<html>
  <body>
    <h1>标题</h1>
    <p>段落。</p>
  </body>
</html>

对应的 DOM 树结构如下：

- 文档节点
  - html 元素节点
    - body 元素节点
      - h1 元素节点
        - 文本节点："标题"
      - p 元素节点
        - 文本节点："段落。"

与 JavaScript 的关系

JavaScript 是操作 DOM 的主要脚本语言。通过 JavaScript，开发者可以实时地更新页面内容，响应用户操作，创建交互式的网页应用。例如，以下代码为按钮添加点击事件处理程序：

document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});

通过深入理解和运用 DOM，开发者可以有效地控制和操作网页文档，实现丰富的动态效果和交互功能。