最初来自工程师KaraLuton的博客PortalDOM，当我第一次在训练营学习编码时，我一直听到这个词，但我一直不知道它的真正含义。是我写的HTML吗？还是我打开控制台检查元素时偶尔点击的元素？老实说，我花了很长时间才弄清楚DOM到底是什么。根据W3C，文档对象模型(DOM)是“有效HTML和格式良好的XML文档的应用程序编程接口。它定义了文档的逻辑结构以及如何访问和操作文档”。什么？简单来说，DOM是浏览器对HTML的表示，允许您操作页面。那么为什么它经常被称为树呢？这是因为DOM以父对象开始，然后扩展为子对象。这些孩子的物品也可以延伸到他们自己的小树中，如上图所示。我在一些网站上了解到，您在DevTools中看到的是DOM的可视化表示，虽然它非常接近，但并不完全正确。DevTools将包含一些在技术上不属于DOM的额外信息（如伪类）。如果您是像我这样的可视化者，那么这是我们在浏览器中可以获得的最接近DOM图像的东西。但是等等，这不是意味着DOM与我们正在编写的HTML相同吗？没有。你有没有不小心遗漏了一个必需的元素并让浏览器为你修复它？即使您已将其从HTML中移除，您仍会在DOM中看到该元素。如果您通过JavaScript操作DOM，那么DOM也将不同于HTML。使用JavaScript，您可以编辑页面的CSS、添加事件侦听器、更改节点属性等。这些正在改变DOM最初用HTML编写的内容。总结一下，虽然DOM听起来很可怕，但它实际上决定了浏览器页面渲染什么，而JavaScript可以通过DOM来操作渲染的元素。非常感谢您阅读我关于DOM的文章！请务必在Twitter上关注我关于技术的大量推文，老实说，我也发了很多关于狗的推文。如果您有任何问题，请随时在下方发表评论或发推文给我。
