[译] 究竟什么是DOM？!

原文自工程师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上关注我关于技术的大量推文，说实话，我也发了很多关于狗的推特。如果您有任何问题，请随时在下面发表评论或发推文给我。