理解DOM到底是什么
栏目: JavaScript · 发布时间: 5年前
内容简介:文档对象模型或者说我们熟悉的“DOM”,web网页的一个界面。它本质上是允许程序读取和操作页面的内容,结构和样式的页面API。 接下来一一分解。浏览器如何从源HTML文档转到在视口中显示样式化和交互式页面称为“关键渲染路径”。 这些步骤大致可分为两个阶段。第一阶段涉及浏览器解析文档以确定最终将在页面上渲染的内容,第二阶段涉及浏览器执行渲染。第一阶段的结果是所谓的“渲染树”。 渲染树是将在页面上呈现的HTML元素及其相关样式的表示。 为了构建这个树,浏览器需要两件事:
文档对象模型或者说我们熟悉的“DOM”,web网页的一个界面。它本质上是允许程序读取和操作页面的内容,结构和样式的页面API。 接下来一一分解。
网页如何构建
浏览器如何从源HTML文档转到在视口中显示样式化和交互式页面称为“关键渲染路径”。 这些步骤大致可分为两个阶段。第一阶段涉及浏览器解析文档以确定最终将在页面上渲染的内容,第二阶段涉及浏览器执行渲染。
第一阶段的结果是所谓的“渲染树”。 渲染树是将在页面上呈现的HTML元素及其相关样式的表示。 为了构建这个树,浏览器需要两件事:
- CSSOM,元素相关样式的结构;
- DOM,元素结构
DOM如何创建(长啥样)
DOM是HTML源文档的基于对象的表示。它有一些差异,我们将在下面看到,但它本质上是一种尝试将HTML文档的结构和内容转换为可供各种程序使用的对象模型。
DOM的对象结构由所谓的“节点树”表示。 它之所以被称为树是因为它可以被认为是具有单个父茎的树,其分枝成几个子枝,每个子枝可以具有叶子。 在这种情况下,父“stem”是根元素,子“branches”是嵌套元素,“leaves”是元素中的内容。
我们以此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> 复制代码
此文档可以表示为以下节点树:
html head title My first web page body h1 Hello, world! p How are you? 复制代码
DOM不是什么
在上面给出的示例中,看起来DOM是源HTML文档的一对一映射或者你看到的DevTools的映射。 但是,正如我所提到的,存在差异。为了完全理解DOM是什么,我们需要看看它不是什么。
DOM不是你的html源文档
尽管DOM是从源HTML文档创建的,但它并不总是完全相同。 有两个实例,DOM可以与源HTML不同。
1. 当HTML无效时
DOM是有效HTML文档的接口。 在创建DOM的过程中,浏览器可以纠正HTML代码中的一些无效。
我们以此HTML文档为例:
<!doctype html> <html> Hello, world! </html> 复制代码
该文档缺少和元素,这是有效HTML的要求。 如果我们查看生成的DOM树,我们将看到这已得到纠正:
html head body Hello, world! 复制代码
2. 当JavaScript修改了DOM
除了作为查看HTML文档内容的界面之外,还可以修改DOM,使其成为动态资源。
例如,我们可以使用Javascript为DOM创建其他节点。
const newParagraph = document.createElement("p"); const paragraphContent = document.createTextNode("I'm new!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph); 复制代码
如上会更改我们的DOM,但并不是更改了我们的HTML文档。
DOM不是你在浏览器中看到的(即渲染树)
你在浏览器视口中看到的是渲染树,正如我所提到的,它是DOM和CSSOM的组合。 真正将DOM与渲染树分开的是,后者只包含最终将在屏幕上绘制的内容。
因为渲染树仅关注渲染的内容,所以它会排除视觉上隐藏的元素。 例如,具有显示的元素:没有与之关联的样式。
<!doctype html> <html lang="en"> <head></head> <body> <h1>Hello, world!</h1> <p style="display: none;">How are you?</p> </body> </html> 复制代码
上面的DOM结构将包含 <p> 元素
html head body h1 Hello, world! p How are you? 复制代码
但是,渲染树,即我们在视口上所见,不包含这个p元素
html body h1 Hello, world! 复制代码
DOM不是DevTools中的结构
这种差异有点小,因为DevTools元素检查器提供了我们在浏览器中最接近的DOM。 但是,DevTools检查器包含不在DOM中的其他信息。
最好的例子是CSS伪元素。 使用:: before和:: after选择器创建的伪元素构成CSSOM和渲染树的一部分,但在技术上不是DOM的一部分。 这是因为DOM仅由源HTML文档构建,不包括应用于元素的样式。
尽管伪元素不是DOM的一部分,但它们仍在我们的devtools元素检查器中。
这就是为什么伪元素不能被Javascript直接获取到的原因,因为伪元素不是DOM的一部分。
总结
DOM是HTML文档的接口。 它被浏览器用作确定在视口中呈现内容的第一步,并通过Javascript程序来修改页面的内容,结构或样式。
虽然与其他形式的源HTML文档类似,但DOM在许多方面有所不同:
- 它总是有效的HTML
- 它是一个可以通过Javascript修改的结构
- 它不包含伪元素(例如:: after)
- 它确实包含隐藏元素(例如 display:none )
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 到底如何理解CAP
- 深入理解Java虚拟机到底是什么
- 深入理解Java虚拟机到底是什么
- 一分钟理解 HTTPS 到底解决了什么问题
- 一线专家:微服务、容器和云原生到底该如何理解?| 视频
- 深入理解go的slice和到底什么时候该用slice
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java Web开发实例大全(基础卷)
软件开发技术联盟 / 清华大学出版社 / 2016-1 / 128.00
《Java Web开发实例大全(基础卷)》筛选、汇集了Java Web开发从基础知识到高级应用各个层面约600个实例及源代码,每个实例按实例说明、关键技术、设计过程、详尽注释、秘笈心法的顺序进行了分析解读。全书分为6篇23章,主要内容有开发环境搭建、Java语言基础、HTML/CSS技术、JSP基础与内置对象、JavaBean技术、Servlet技术、过滤器与监听器技术、JSTL标签库、JavaS......一起来看看 《Java Web开发实例大全(基础卷)》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
XML 在线格式化
在线 XML 格式化压缩工具