什么是 DOM？

一位读者最近写信问我什么是 DOM。他们说他们已经听说过它，并隐约地了解过它，但并不确定自己是否真的理解了它。

我们可以解决这个问题。

但您编写的 HTML 会被浏览器解析并转换为 DOM。

查看源代码只会显示构成该页面的 HTML。这很可能是您编写的 HTML 的完全副本。

如果例如您在后端语言中的模板文件中工作并且不经常查看已编译的 HTML 输出，它可能看起来像不同的代码。或者，在您编写 HTML 后会发生一个“构建过程”，并且代码被输出到实时网站。也许该 HTML 被压缩或以其他方式更改。

查看源代码实际上有点奇怪。唯一关心查看该代码的人是开发人员，所有主要浏览器现在都内置了开发者工具。它可能已经失去了它的用处。

当您查看正在使用的任何 DevTools 中的面板时，该面板会显示看起来像 HTML 的内容，那就是 DOM 的可视化表示！我们做到了！

嗯，是的，它确实如此。请记住，它是直接从您的 HTML 创建的。在大多数简单情况下，DOM 的可视化表示将与您的简单 HTML 相同。

但它通常并不相同……

DOM 何时与 HTML 不同？

这是一种可能性：您的 HTML 中存在错误，浏览器已为您修复了它们。假设您的 HTML 中有一个 <table> 元素，但缺少必需的 <tbody> 元素。浏览器会为您插入该 <tbody>。它将存在于 DOM 中，因此您可以使用 JavaScript 找到它并使用 CSS 对其进行样式设置，即使它不在您的 HTML 中。

但最有可能的情况是……

JavaScript 可以操作 DOM

假设您的 HTML 中有一个空元素，如下所示

<div id="container"></div>

然后在您的 HTML 中，有一段 JavaScript 代码

<script>
  var container = document.getElementById("container");
  container.innerHTML = "New Content!";
</script>

即使您不了解 JavaScript，您也可以推断出这段代码。在屏幕上，您将看到新内容！而不是什么都没有，因为那个空的 div 被填充了一些，嗯，新内容。

如果您使用 DevTools 查看 DOM 的可视化表示，您将看到

<div id="container">New Content!</div>

这与您的原始 HTML 或您在查看源代码中看到的内容不同。

Ajax 和模板

让我们不要深究，但我敢肯定，如果您要使用 Ajax 从其他地方获取内容并将其放到页面上，DOM 将与您的原始 HTML 大不相同。使用某种数据加载并使用 客户端模板 也是如此。

尝试访问 Gmail 并查看源代码。它只是一堆脚本和来自原始页面加载的数据。与您在屏幕上看到的内容相比，几乎无法识别。

JavaScript 与 DOM

JavaScript 是一种浏览器读取并执行操作的语言。但 DOM 是这些操作发生的地方。事实上，您可能认为的很多“JavaScript 东西”更准确地说是“DOM API”。

例如，我们可以编写 JavaScript 来监视元素上的 mouseenter 事件。但那个“元素”实际上是一个 DOM 节点。我们通过该 DOM 节点上的 DOM 属性附加该侦听器。当该事件发生时，是 DOM 节点发出该事件。

如果我说错任何内容，请见谅。但我希望您能理解我的意思。DOM 是这里的生命线。它是浏览器中所有事情发生的地方。JavaScript 只是语法，语言。它可以在完全没有 DOM API 的情况下在浏览器外部使用（请参阅 Node.js）。

这篇文章对我不够深入和详细。

好吧，DOM 代表“文档对象模型”，等等。我不想（也不具备资格）写那篇文章。以下是一些内容丰富的文章

• W3C：什么是文档对象模型？
• MDN：简介 - 文档对象模型
• 维基百科：文档对象模型