DOM 到底是什么？！

DOM。我刚开始在训练营学习编程的时候，经常听到这个词，但我一直不明白它到底是什么意思。是指我写的 HTML 吗？是指我有时想查看元素时不小心点到的“查看源代码”吗？我一直没真正理解。说实话，我花了好一会儿才弄清楚它到底是什么。

根据W3C的定义，文档对象模型 (DOM) 是“有效 HTML 和格式良好的 XML 文档的应用程序编程接口。它定义了文档的逻辑结构以及访问和操作文档的方式”。

什么？简单来说，DOM 是 HTML 在浏览器中的表示，允许你操作页面。

那么，为什么它经常被称为树呢？这是因为 DOM 始于一个父项，然后分支出多个子项。这些子项还可以分支出它们自己的小树，就像上图所示。

我在一些网站上看到过，DevTools 中显示的是 DOM 的可视化表示，虽然非常接近，但并不完全准确。DevTools 会包含一些技术上不属于 DOM 的附加信息（例如伪类）。如果你像我一样是个视觉爱好者，那么这就是我们在浏览器中所能看到的最接近 DOM 的描绘了。

但是等一下——这难道不意味着 DOM 和我们编写的 HTML 是一样的吗？不是的。

您是否曾意外遗漏某个必需元素，而浏览器却帮您修复了它？即使您没有在 HTML 中添加该元素，DOM 中仍然会显示该元素。如果您通过 JavaScript 操作 DOM，那么 DOM 也会与 HTML 有所不同。

使用 JavaScript，您可以编辑页面的 CSS、添加事件监听器、更改节点属性等等。这些操作都会改变您最初在 HTML 中编写的 DOM。

总而言之，虽然 DOM 听起来非常令人生畏，但它实际上是浏览器如何确定在我们的页面上呈现什么，以及我们如何通过 JavaScript 来操作这些呈现的元素。

非常感谢您阅读我关于 DOM 的文章！请务必在Twitter上关注我，我会发布很多关于科技的推文，说实话，还有很多关于狗狗的推文。如果您有任何疑问，欢迎在下方评论或发推文给我。