原文自工程师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上关注我关于手艺的大批推文，说实话，我也发了许多关于狗的推特。假如您有任何问题，请随时在下面宣布批评或发推文给我。