DOM

Document Object Model 文档对象模型

什么是文档对象模型？ — What is the Document Object Model?

DOM 是什么？

想象一下，你有一张房子的建筑蓝图，上面画着房子的每一个部分：墙、门、窗户、屋顶等等。DOM 就像是网页的“蓝图”。当你打开一个网页，浏览器会把网页的 HTML 代码（那些 <html>、<div>、<p> 标签）解析成一个树状结构，这个结构就是 DOM。它把网页里的每一个元素（比如标题、段落、图片）都整理得清清楚楚，让计算机（特别是 JavaScript）能找到它们、操作它们。

简单来说，DOM 是网页的骨架图，它把网页的内容变成一个个“节点”（node），这些节点就像蓝图上的标记点，互相之间还有父子关系、兄弟关系，形成一个大树。

1
2
3
4
5
6
7
8
9


<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎</h1>
    <p>这是一个段落。</p>
  </body>
</html>

在这个 HTML 里，DOM 会把它变成一个树形结构：

1
2
3
4
5
6
7
8
9


- <html> 是根节点，就像树的树根，整个网页的起点。

- <html> 下面有两个“孩子”：<head> 和 <body>。

- <head> 里有个孩子 <title>，它的内容是“我的网页”。

- <body> 里有两个孩子：<h1>（内容是“欢迎”）和 <p>（内容是“这是一个段落。”）。

这就像一个家庭的家谱：<html> 是爷爷，<head> 和 <body> 是他的两个孩子，<title> 是 <head> 的孩子，<h1> 和 <p> 是 <body> 的孩子。每个节点都是一个“对象”，有自己的属性，比如 <p> 的 innerHTML 属性就是“这是一个段落。”。

DOM 有什么用？

DOM 的牛逼之处在于，它让 JavaScript 能和网页互动。有了 DOM，JavaScript 就像一个装修工人，可以拿着网页的蓝图（DOM）去干活：

查看：找到某个节点，看看它是什么内容。
修改：比如把 <p> 的文字从“这是一个段落。”改成“这是新段落！”。
添加：在 <body> 里加一个新的 <p> 节点。
删除：把某个节点去掉。

举个例子：你想做一个网页，用户点一个按钮，页面上的文字就变了。你可以用 JavaScript 写代码，通过 DOM 找到那个文字所在的节点，然后改它的内容。比如：

1

找到 <p> 节点 let paragraph = document.querySelector("p"); // 修改它的内容 paragraph.innerHTML = "文字被我改啦！";

再比如，你想做一个待办事项列表，用户点按钮就能添加新任务。这也是通过 DOM 实现的：JavaScript 创建一个新节点（比如 <li>），然后把它加到列表里。

DOM 是桥梁

所以，DOM 就像是网页（HTML）和 JavaScript 之间的“翻译官”或者“桥梁”。HTML 负责写出网页的内容和结构，DOM 把这些内容变成一个树形结构，JavaScript 通过 DOM 来动态地控制网页，让网页不再是静态的，而是可以互动、有变化的。

小结

用最简单的话说：

DOM 是网页的树形蓝图，把每个元素都变成节点。
JavaScript 通过 DOM 操作网页，可以改内容、加东西、删东西。
它让网页变得活起来，能根据用户的操作动态变化。