[译] 究竟什么是DOM?!

suan_suan
原文自工程师Kara Luton博客,传送门

DOM,当我第一次在训练营学习编码时,就一直听到这个词,但是我从来不知道它到底是什么意思。是我写的HTML吗?还是我偶尔打开控制台检查元素的时候点击的元素?说实话,我花了好长时间才弄明白DOM究竟是什么。

根据W3C,文档对象模型(DOM)是“有效HTML和格式良好的XML文档的应用程序编程接口。它定义了文档的逻辑结构以及文档的访问和操作方式”。

什么?简单来说,DOM是HTML在浏览器中的表示形式,允许您操纵页面。

enter description here

那么为什么它经常被称为树呢?这是因为DOM从一个父项开始,该父项扩展为子项。这些子项的项也可以延伸到他们自己的小树中,就像你在上图中看到的那样。

我在一些网站上读到,你在DevTools中看到的就是DOM的可视化表示,虽然它非常接近,但并不完全正确。DevTools将包含一些额外的信息(比如伪类),这些信息在技术上不是DOM的一部分。如果你是像我这样的可视化人员,这是我们在浏览器中所能看到的最接近DOM的图像。

但等一下,这难道不意味着DOM和我们正在编写的HTML是一样的吗?不。

您是否曾经不小心遗漏了一个必需的元素,并让浏览器为您修复它?您将在DOM中看到这个元素,尽管您已经将它从HTML中删除了。如果您通过JavaScript操作DOM,那么DOM也将不同于HTML。

使用JavaScript可以编辑页面的CSS、添加事件监听器、更改节点属性等等。这些都在改变DOM原来在HTML中编写的内容。

总结一下,虽然DOM听起来非常吓人,但实际上是它决定着在浏览器页面上呈现什么,以及JavaScript可以通过DOM来操纵呈现的元素。

非常感谢你阅读我关于DOM的文章!一定要在Twitter上关注我关于技术的大量推文,说实话,我也发了很多关于狗的推特。如果您有任何问题,请随时在下面发表评论或发推文给我。

阅读 4.3k

努力写bug中......

1.1k 声望
176 粉丝
0 条评论

努力写bug中......

1.1k 声望
176 粉丝
文章目录
宣传栏