欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

究竟什么是DOM?

程序员文章站 2022-03-09 13:49:07
文档对象模型或“dom”是网页的接口。 它本质上是页面的api,允许程序读取和操作页面的内容,结构和样式。 网页是如何构建的? 如何从源html文档转到在视口中显示样式化和交...

文档对象模型或“dom”是网页的接口。 它本质上是页面的api,允许程序读取和操作页面的内容,结构和样式。

网页是如何构建的?

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

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

cssom,与元素相关的样式的表示 dom,元素的表示

如何创建dom(以及它看起来像什么)?

dom是源html文档的基于对象的表示。 它有一些差异,我们将在下面看到,但它本质上是一种尝试将html文档的结构和内容转换为可供各种程序使用的对象模型。

dom的对象结构由所谓的“节点树”表示。 它之所以被称为是因为它可以被认为是具有单个父茎的树,其分枝成几个子枝,每个子枝可以具有叶子。 在这种情况下,父“stem”是根

元素,子“branches”是嵌套元素,“leaves”是元素中的内容。

我们以此html文档为例:

hello, world!

how are you

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

clipboard.png

dom不是什么?

在上面给出的示例中,看起来dom是源html文档的一对一映射或您看到的devtools的映射。 但是,正如我所提到的,存在差异。 为了完全理解dom是什么,我们需要看看它不是什么。

dom不是您的源html

尽管dom是从源html文档创建的,但它并不总是完全相同。 有两个实例,dom可以与源html不同。

当html无效时

dom是有效html文档的接口。 在创建dom的过程中,浏览器可以纠正html代码中的一些无效。

我们以此html文档为例:

hello, world!

该文档缺少

和元素,这是有效html的要求。 如果我们查看生成的dom树,我们将看到这已得到纠正:

clipboard.png

javascript修改dom时

除了作为查看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和cssom的组合。 真正将dom与渲染树分开的是,后者只包含最终将在屏幕上绘制的内容。

因为渲染树仅关注渲染的内容,所以它会排除视觉上隐藏的元素。 例如,具有display:none的样式。

hello, world!

how are you

dom将包含

元素:

clipboard.png

但是,渲染树以及因此在视口中看到的内容将不包含该元素。

clipboard.png

dom不是devtools中的东西

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

最好的例子是css伪元素。 使用::before和::after选择器创建的伪元素构成cssom和渲染树的一部分,但在技术上不是dom的一部分。 这是因为dom仅由源html文档构建,不包括应用于元素的样式。

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

clipboard.png

这就是为什么伪元素不能被javascript作为目标的原因,因为它们不是dom的一部分。

概括

dom是html文档的接口。 它被浏览器用作确定在视口中呈现内容的第一步,并通过javascript程序来修改页面的内容,结构或样式。

虽然与其他形式的源html文档类似,但dom在许多方面有所不同:

它总是有效的html 它是一个可以通过javascript修改的活模型 它不包含伪元素(例如::after) 它确实包含隐藏元素(例如display: none)