未加星标

[译] 究竟什么是DOM?

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

浏览器如何从一个源HTML文档到在视图中显示一个样式化的交互式页面被称为“关键呈现路径”。虽然这个过程可以分解为几个步骤,但正如我在理解关键呈现路径的文章中所述,这些步骤大致可以分为两个阶段。第一个阶段涉及浏览器解析文档以确定最终在页面上呈现什么,第二个阶段涉及浏览器执行呈现。


[译] 究竟什么是DOM?

第一阶段的结果是所谓的“渲染树”。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。为了构建这个树,浏览器需要两件事:

CSSOM,与元素相关的样式的表示 DOM,元素的表示 如何创建DOM(以及它看起来像什么)?

DOM是源HTML文档的基于对象的表示。正如我们将在下面看到的,它有一些不同之处,但它本质上是试图将HTML文档的结构和内容转换为可由各种程序使用的对象模型。

DOM的对象结构由所谓的“节点树”表示。之所以这样叫它,是因为它可以被认为是一棵树,它有一个单一的父茎,它可以分出几个子枝,每个子枝都可能有叶子。在本例中,父“茎”是根元素,子“分支”是嵌套的元素,而“叶”是元素中的内容。

我们以此HTML文档为例:

<!doctype html> <html lang="en"> <head> <title>My first web page</title> </head> <body> <h1>Hello, world!</h1> <p>How are you?</p> </body> </html> 复制代码

本文档可以表示为以下节点树:


[译] 究竟什么是DOM?
DOM不是什么?

在我上面给出的示例中,DOM似乎是源HTML文档或您所看到的DevTools的一对一映射。但是,正如我所提到的,有一些区别。为了完全理解DOM是什么,我们需要了解它不是什么。

DOM不是源HTML

虽然DOM是从源HTML文档创建的,但它并不总是完全相同。在两个实例中,DOM可以与源HTML不同。

1. 当HTML无效时

DOM是有效HTML文档的接口。在创建DOM的过程中,浏览器可能会纠正HTML代码中的一些错误。

让我们以这个HTML文档为例:

<!doctype html> <html> Hello, world! </html> 复制代码

文档缺少一个 <head> 和 <body> 元素,这是有效HTML的一个要求。如果我们查看生成的DOM树,就会发现这已经得到了纠正:


[译] 究竟什么是DOM?
2. 当DOM被javascript修改时

除了作为查看HTML文档内容的接口之外,还可以修改DOM,使其成为一种活动资源。 例如,我们可以使用Javascript为DOM创建额外的节点。

var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("I'm new!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph); 复制代码

这将会更新DOM,但当然不会更新HTML文档。

DOM不是您在浏览器中看到的(即,渲染树)

您在浏览器视图中看到的是呈现树,如前所述,它是DOM和csen的组合。DOM与呈现树的真正区别在于,后者只包含最终将在屏幕上绘制的内容。

因为渲染树只关注渲染的内容,它排除了视觉上隐藏的元素。例如,具有与 display: none 样式相关联的元素。

<!doctype html> <html lang="en"> <head></head> <body> <h1>Hello, world!</h1> <p style="display: none;">How are you?</p> </body> </html> 复制代码

DOM将包含 <p> 元素:


[译] 究竟什么是DOM?

然而,呈现树,以及在视图中看到的内容,将不包含该元素。


[译] 究竟什么是DOM?
DOM不是DevTools中的DOM

这种差异有点小,因为DevTools元素检查器提供了与浏览器中DOM最接近的近似。但是,DevTools检查器包含了不在DOM中的其他信息。

最好的例子是CSS伪元素。使用 ::before 和 ::after 选择器创建的伪元素构成CSSOM和渲染树的一部分,但在技术上不是DOM的一部分。这是因为DOM是单独从源HTML文档构建的,不包括应用于元素的样式。

尽管伪元素不是DOM的一部分,但是它们在我们的devtools元素检查器中。


[译] 究竟什么是DOM?

这就是Javascript不能以伪元素为目标的原因,因为它们不是DOM的一部分。

回顾

DOM是HTML文档的接口。浏览器使用它作为决定在视图中呈现什么内容的第一步,并通过Javascript程序修改页面的内容、结构或样式。

虽然与源HTML文档的其他形式类似,DOM在许多方面是不同的:

::after display: none

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:[译] 究竟什么是DOM?
本站链接:https://www.codesec.net/view/620886.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(13)