共计 782 个字符，预计需要花费 2 分钟才能阅读完成。
原文自工程师 Kara Luton 博客，传送门
DOM，当我第一次在训练营学习编码时，就一直听到这个词，但是我从来不知道它到底是什么意思。是我写的 HTML 吗？还是我偶尔打开控制台检查元素的时候点击的元素？说实话，我花了好长时间才弄明白 DOM 究竟是什么。
根据 W3C，文档对象模型（DOM）是“有效 HTML 和格式良好的 XML 文档的应用程序编程接口。它定义了文档的逻辑结构以及文档的访问和操作方式”。
什么? 简单来说，DOM 是 HTML 在浏览器中的表示形式，允许您操纵页面。
那么为什么它经常被称为树呢? 这是因为 DOM 从一个父项开始，该父项扩展为子项。这些子项的项也可以延伸到他们自己的小树中，就像你在上图中看到的那样。
我在一些网站上读到，你在 DevTools 中看到的就是 DOM 的可视化表示，虽然它非常接近，但并不完全正确。DevTools 将包含一些额外的信息 (比如伪类)，这些信息在技术上不是 DOM 的一部分。如果你是像我这样的可视化人员，这是我们在浏览器中所能看到的最接近 DOM 的图像。
但等一下，这难道不意味着 DOM 和我们正在编写的 HTML 是一样的吗? 不。
您是否曾经不小心遗漏了一个必需的元素，并让浏览器为您修复它? 您将在 DOM 中看到这个元素，尽管您已经将它从 HTML 中删除了。如果您通过 JavaScript 操作 DOM，那么 DOM 也将不同于 HTML。
使用 JavaScript 可以编辑页面的 CSS、添加事件监听器、更改节点属性等等。这些都在改变 DOM 原来在 HTML 中编写的内容。
总结一下，虽然 DOM 听起来非常吓人，但实际上是它决定着在浏览器页面上呈现什么，以及 JavaScript 可以通过 DOM 来操纵呈现的元素。
非常感谢你阅读我关于 DOM 的文章！一定要在 Twitter 上关注我关于技术的大量推文，说实话，我也发了很多关于狗的推特。如果您有任何问题，请随时在下面发表评论或发推文给我。
