究竟什么是DOM?

正文

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

如何构建web页面？

第一阶段的结果是所谓的“渲染树”。渲染树是将在页面上呈现的HTML元素及相关样式的表示。为了构建这个树，浏览器需要 1.CSSOM 与元素相关的样式的表示 2.DOM 元素的表示

如何创建DOM?

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

DOM不是什么？

1.DOM不是源HTML

虽然dom是从源html文档创建的，但不总是完全相同。DOM可以与源HTMl不同。

2.当HTMl无效时，dom是有效html文档的接口。在创建DOM的过程中，浏览器可能会纠正HTML代码中的一些错误。

3.当dom被javascript修改时，这将会更新DOM，但当然不会更新HTML文档。

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

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

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

回顾

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

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

• 它总是有效的HTML
• 它是一个活生生的模型，可以由Javascript修改
• 它不包含伪元素(例如,::after)
• 它确实包含隐藏元素(例如，display: none)