什么是DOM？
需要我们要站在浏览器的角度来思考。🤔
DOM (Document Object Model) 文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM是接口，HTML是标记语言。
节点
在HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
而HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
节点树中的节点彼此拥有层级关系。常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。
HTML片段
<html> 节点是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
<h1>DOM</h1>
<p>Hello world!</p>
</body>
</html>
浏览器渲染页面的过程
用户输入网址通过DNS（Domain Name System）解析后得到服务器地址，浏览器向服务器发起http请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回给浏览器。
浏览器接收到代码后进行解析，经过DOM构造、布局以及绘制页面，最终展现为网页。
第一步，DOM构造
浏览器首先将收到的html代码，通过html解析器解析构建为一颗DOM树。DOM树就像是一颗倒长着的大树，可以顺着这颗树做出许多操作。然后将接收到的css代码，通过css解析器构建出样式表规则将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。
第二步，布局
浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上。传送带上的盒子就是节点，而这条流动的传送带就是文档流。文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。
第三步，绘制页面
布局完成之后，在页面上其实是看不到任何内容的，浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化。
最后一步就是将所有内容绘制出来，完成整个页面的渲染。
参考文章：
果冻公开课
HTML DOM 教程
