文档对象模型，或“DOM”，是web页面的接口。它本质上是页面的API，允许程序读取和操作页面的内容、结构和样式。让我们分解一下。
如何构建web页面?
浏览器如何从一个源HTML文档到在视图中显示一个样式化的交互式页面被称为“关键呈现路径”。虽然这个过程可以分解为几个步骤，但正如我在理解关键呈现路径的文章中所述，这些步骤大致可以分为两个阶段。第一个阶段涉及浏览器解析文档以确定最终在页面上呈现什么，第二个阶段涉及浏览器执行呈现。
第一阶段的结果是所谓的“渲染树”。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。为了构建这个树，浏览器需要两件事：
1.CSSOM，与元素相关的样式的表示 2.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> web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）本文档可以表示为以下节点树:
DOM不是什么?
在我上面给出的示例中，DOM似乎是源HTML文档或您所看到的DevTools的一对一映射。但是，正如我所提到的，有一些区别。为了完全理解DOM是什么，我们需要了解它不是什么。
DOM不是源HTML
虽然DOM是从源HTML文档创建的，但它并不总是完全相同。在两个实例中，DOM可以与源HTML不同。
当HTML无效时DOM是有效HTML文档的接口。在创建DOM的过程中，浏览器可能会纠正HTML代码中的一些错误。 让我们以这个HTML文档为例:
<!doctype html> <html> Hello, world! </html>文档缺少一个<head>和<body>元素，这是有效HTML的一个要求。如果我们查看生成的DOM树，就会发现这已经得到了纠正:
当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 lang="en"> <head></head> <body> <h1>Hello, world!</h1> <p style="display: none;">How are you?</p> </body> </html>DOM将包含<p>元素:
然而，渲染树，以及在视图中看到的内容，将不包含该元素。
DOM不是DevTools中的DOM
这种差异有点小，因为DevTools元素检查器提供了与浏览器中DOM最接近的近似。但是，DevTools检查器包含了不在DOM中的其他信息。
最好的例子是CSS伪元素。使用::before和::after选择器创建的伪元素构成CSSOM和渲染树的一部分，但在技术上不是DOM的一部分。这是因为DOM是单独从源HTML文档构建的，不包括应用于元素的样式。
尽管伪元素不是DOM的一部分，但是它们在我们的devtools元素检查器中。
这就是Javascript不能以伪元素为目标的原因，因为它们不是DOM的一部分。
如果大家对编程，web前端感兴趣，想要学习，打算深入了解这个行业的朋友，可以加下我们的前端学习扣qun : 784783012 ，不论你是学生还是想转行的朋友，我都欢迎，每晚分享干货，整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家：学习前端我们是认真的
总结
DOM是HTML文档的接口。浏览器使用它作为决定在视图中呈现什么内容的第一步，并通过Javascript程序修改页面的内容、结构或样式。
虽然与源HTML文档的其他形式类似，DOM在许多方面是不同的:
它总是有效的HTML 它是一个活生生的模型，可以由Javascript修改 它不包含伪元素(例如,::after) 它确实包含隐藏元素(例如，display: none)