文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

什么是DOM?如何构建web页面

2023-06-03 12:08

关注

文档对象模型,或“DOM”,是web页面的接口。它本质上是页面的API,允许程序读取和操作页面的内容、结构和样式。让我们分解一下。

如何构建web页面?

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

什么是DOM?如何构建web页面

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

CSSOM,与元素相关的样式的表示
2.DOM,元素的表示

如何创建DOM?

DOM是源HTML文档的基于对象的表示。正如我们将在下面看到的,它有一些不同之处,但它本质上是试图将HTML文档的结构和内容转换为可由各种程序使用的对象模型。
DOM的对象结构由所谓的“节点树”表示。之所以这样叫它,是因为它可以被认为是一棵树,它有一个单一的父茎,它可以分出几个子枝,每个子枝都可能有叶子。在本例中,父“茎”是根元素,子“分支”是嵌套的元素,而“叶”是元素中的内容。

我们以此HTML文档为例

<!doctype html> <html>  <head>    <title>My first web page</title>   </head>  <body>     <h2>Hello, world!</h2>     <p>How are you?</p>   </body> </html>

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

什么是DOM?如何构建web页面

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?如何构建web页面

  1. 当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和CSSOM的组合。DOM与渲染树的真正区别在于,后者只包含最终将在屏幕上绘制的内容。
[图片上传失败...(image-61c376-1546073073535)]

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

<!doctype html> <html>   <head></head>   <body>     <h2>Hello, world!</h2>     <p style="display: none;">How are you?</p>   </body> </html>

DOM将包含<p>元素:

什么是DOM?如何构建web页面

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

什么是DOM?如何构建web页面

DOM不是DevTools中的DOM

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

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

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

什么是DOM?如何构建web页面

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

总结

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

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

这里推荐一下我的学习交流群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入

点击:加入

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯