HTML 文档对象模型（DOM）是浏览器解析 HTML 文档后生成的树形结构，允许开发者通过编程方式访问和操作文档的内容、结构和样式。通过 JavaScript 操作 DOM，可以动态地更新页面内容、结构和样式，实现丰富的交互效果。

DOM 树结构

在 DOM 中，HTML 文档被表示为一个节点树，其中每个节点代表文档的一部分：

  • 文档节点：整个文档对象。
  • 元素节点：每个 HTML 元素。
  • 属性节点：每个 HTML 元素的属性。
  • 文本节点：元素或属性中的文本内容。
  • 注释节点：HTML 中的注释。

例如，以下简单的 HTML 文档：

<!DOCTYPE html>
<html>
  <head>
    <title>示例页面</title>
  </head>
  <body>
    <h1>欢迎</h1>
    <p>这是一个示例页面。</p>
  </body>
</html>

其对应的 DOM 树结构如下：

- 文档节点
  - html 元素节点
    - head 元素节点
      - title 元素节点
        - 文本节点："示例页面"
    - body 元素节点
      - h1 元素节点
        - 文本节点："欢迎"
      - p 元素节点
        - 文本节点："这是一个示例页面。"

操作 DOM

通过 JavaScript，可以使用多种方法来访问和操作 DOM 元素：

  • document.getElementById(id)：获取具有指定 ID 的元素。
  • document.getElementsByTagName(tagName)：获取具有指定标签名的所有元素。
  • document.getElementsByClassName(className)：获取具有指定类名的所有元素。
  • document.querySelector(selector)：获取匹配指定 CSS 选择器的第一个元素。
  • document.querySelectorAll(selector)：获取匹配指定 CSS 选择器的所有元素。

例如，修改页面中 ID 为 “demo” 的元素的内容：

document.getElementById("demo").innerHTML = "Hello, World!";

要创建新的元素并添加到 DOM 中，可以使用以下方法：

// 创建新的段落元素
var newParagraph = document.createElement("p");
// 创建文本节点
var textNode = document.createTextNode("这是一个新段落。");
// 将文本节点添加到段落元素中
newParagraph.appendChild(textNode);
// 将新的段落元素添加到 body 中
document.body.appendChild(newParagraph);

事件处理

DOM 还允许为元素添加事件处理程序，以响应用户的交互：

// 获取按钮元素
var button = document.getElementById("myButton");
// 添加点击事件处理程序
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

通过深入学习和掌握 HTML DOM，您可以创建动态、交互性强的网页应用。

要获取更详细的教程和示例，您可以参考以下资源：