标签：信息 sso object model 理解 交互 直接 如何 content
首先DOM全称为(document Object Model）,是针对HTML和XML的API。 可以理解为DOM就是一系列功能集合。从一下几个方面理解
一、网页如何构建
浏览器如何从源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不同。
这就是为什么伪元素不能被Javascript直接获取到的原因，因为伪元素不是DOM的一部分。
总结
DOM是HTML文档的接口。 它被浏览器用作确定在视口中呈现内容的第一步，并通过Javascript程序来修改页面的内容，结构或样式。
虽然与其他形式的源HTML文档类似，但DOM在许多方面有所不同：
有效的HTML，一个可以通过Javascript修改的结构，DOM不包含伪元素（例如:: after） 它确实包含隐藏元素（例如display：none）
标签：信息 sso object model 理解 交互 直接 如何 content
原文地址：https://blog.51cto.com/14582569/2496411
