摘要：是我写的吗还是我偶尔打开控制台检查元素的时候点击的元素说实话，我花了好长时间才弄明白究竟是什么。什么简单来说，是在浏览器中的表示形式，允许您操纵页面。那么为什么它经常被称为树呢这是因为从一个父项开始，该父项扩展为子项。
原文自工程师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上关注我关于技术的大量推文，说实话，我也发了很多关于狗的推特。如果您有任何问题，请随时在下面发表评论或发推文给我。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53883.html
摘要：是我写的吗还是我偶尔打开控制台检查元素的时候点击的元素说实话，我花了好长时间才弄明白究竟是什么。什么简单来说，是在浏览器中的表示形式，允许您操纵页面。那么为什么它经常被称为树呢这是因为从一个父项开始，该父项扩展为子项。 原文自工程师Kara Luton博客，传送门 DOM，当我第一次在训练营学习编码时，就一直听到这个词，但是我从来不知道它到底是什么意思。是我写的HTML吗？还是我偶尔...
摘要：模式并不就是一个具体的解决方案。我们要记住模式的角色仅仅就是给我们提供一个解决方案体系。使用本地浏览器的方法比如来选择所有为的元素。后者毫无竞争力。在本书的后面我们将继续讨论更多的设计模式。 原书链接Learning JavaScript Design Patterns水平有限很多地方不通顺，错翻漏翻欢迎交流。 什么是模式？ 模式是一种可普遍应用于软件设计——对我们前端人员来讲就是Ja...
摘要：比如，我们可以监听事件由实例发出，然后在任何浏览器中就是变化的时候都会得到通知，如下所示每一个作用域对象都会有这个方法，可以用来注册一个作用域事件的侦听器。这个函数所扮演的侦听器在被调用时会有一个对象作为第一个参数。 上一篇：【译】《精通使用AngularJS开发Web App》（二） 下一篇：【译】《精通使用AngularJS开发Web App》（四） 书名：Mastering W...
摘要：值得注意的是，谷歌浏览器和大多数浏览器不同，每一个选项卡都是渲染引擎的一个实例，都拥有独立的进程。组件之间的通信火狐和谷歌都发展了一个特殊的通信结构，后面我们将会单独来讲。渲染引擎我们所讨论的几款浏览器火狐谷歌都是基于两种渲染引擎建立的。 写在前面 这篇文章是一篇译文，年代有点久，部分内容有过时，请读者仔细阅读，翻译自How browser work，原文地址为点击这里查看原文 简介 ...
摘要：所以，单向数据流的意思是指在变更检测期间属性绑定变更的架构。相反，输出绑定过程并没有在变更检测期间内运行，所以它没有把单向数据流转变为双向数据流。说的单向数据流说的是服务层，而不是视图层嗷。 原文链接： Do you really know what unidirectional data flow means in Angular 关于单向数据流，还可以参考这篇文章，且文中还有 y...
阅读 3925·2021-10-12 10:12
阅读 2886·2021-09-10 11:18
阅读 3674·2019-08-30 15:54
阅读 2810·2019-08-30 15:53
阅读 640·2019-08-30 13:54
阅读 968·2019-08-30 13:21
阅读 2262·2019-08-30 12:57
阅读 1688·2019-08-30 11:10
