[译] 究竟什么是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上关注我关于技术的大量推文，说实话，我也发了不少关于狗的推特。若是您有任何问题，请随时在下面发表评论或发推文给我。