抢先看：https://www.zhihu.com/question/34219998
浏览器渲染页面的过程
一、DOM构造
HTML解析器：将浏览器接收到的HTML代码解析并构建成DOM树，DOM树中的节点有一定的关联，如父子、兄弟，方便我们操作节点。如下图所示：
CSS解析器： 将浏览器接收到的CSS代码构建出样式表规则，根据选择器放到对应的DOM树的节点上，形成带有样式属性的DOM树。如下图所示：
二、布局
浏览器从上到下，从左到右读取DOM数的文档结点（盒子），顺序存放到文档流（传送带）中。
文档流排完之后，开始获取计算节点的坐标和大小等css属性，作为盒子的包装说明。
最后把盒子在仓库中进行板房，此时节点布局到了页面。
三、绘制页面
布局完成【没有进行可视化】，最后就是把内容绘制出来，完成整个页面的渲染。
DOM详解
D：表示document，上述中提到的文档流。当我们创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。将我们编写的网页文档转换为一个文档对象。
O：表示object，是宿主对象（浏览器提供的对象），DOM中的O表示的document对象，主要的功能就是处理网页内容。
M：表示model，即表示一种表现形式。浏览器为网页的显示提供了表现形式。
文档对象模型（DOM）是HTML和XML文档的编程接口。它提供了对文档的结构化表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。即DOM会将web页面和程序语言连接起来。
DOM的方法：可以让我们用特定的方式操作这个树，改变文档的结构、样式或内容。
事件处理器：节点可以关联事件处理器，一旦某一事件被触发了，这个事件处理器就会被执行。
如何访问DOM
使用document和window对象的API来操作文档本身或获取文档的子类。
访问DOM的时机
操作DOM之前要保证浏览器已经渲染过了
时机一：在HTML文档的body元素结束标签之前
可以是外部的js文件，也可以是内部的script标签
<!DOCTYPE html>
<html>
<head>
<title>fieldset</title>
</head>
<body>
<div id="message">
</div>
<div>
</div>
<script type="text/javascript">
let div = document.getElementById("message");
</script>
</body>
</html>
时机二：使用文档加载事件
可以是外部的js文件，也可以是内部的script标签
<!DOCTYPE html>
<html>
<head>
<title>fieldset</title>
</head>
<body>
<div id="message">
</div>
<script type="text/javascript">
let div = document.getElementById("message");
</script>
<div>
</div>
</body>
</html>
时机三：在HTML文档的任意地方，并且使用定时器设置为异步
可以是外部的js文件，也可以是内部的script标签
<!DOCTYPE html>
<html>
<head>
<title>fieldset</title>
</head>
<body>
<script type="text/javascript">
let div;
setTimeout(function(){
div = document.getElementById("message");
console.log(div)
})
</script>
<div id="message">
</div>
<div>
</div>
</body>
</html>
时机四：加载外部js文件，且使用defer属性
index.html
<!DOCTYPE html>
<html>
<head>
<title>fieldset</title>
</head>
<body>
<script defer type="text/javascript" src="js/index.js"></script>
<div id="message">
</div>
<div>
</div>
</body>
</html>
index.js
let div = document.getElementById("message");
console.log(div)
节点对象 Node
| 类型 | 简介 |
|---|---|
| document | DOM操作的起始节点 |
| 标签元素节点 | Element元素或节点 |
| 文本节点 | 表示文本的节点 |
| 注释节点 | 表示HTML中的注释的节点 |
| NodeList | Node的列表 |
| HTMLCollection | HTML的集合 |
NodeList VS HTMLCollection
NodeList和HTMLCollection都是包含多个节点标签的集合
| NodeList | HTMLCollection | |
|---|---|---|
| length | 有 | 有 |
| 方法 |  NodeList.png
|
 HTMLCollection.png
|
| 来源 | document.querySelector() document.getElementsByName() |
document.getElementsByTagName() document.getElementByClassName() |
转换为数组
方法一：使用call调用Array中的原型方法
Array.prototype.slice.call(节点集合, 0);作用为把具有length属性的对象转换为数组。返回值数组类型
方法二：使用Array.from(节点集合)
方法三：使用点语法将节点集合转换为数组
节点的原型链
| 原型 | 说明 |
|---|---|
| Object | 根对象 |
| EventTarget | 提供事件的支持（addEventListener、removeEventListener、dispatchEvent） |
| Node | 提供节点的操作方法（appendChild、insertBefore、removeChild、cloneNode） |
| Element | 提供元素中操作方法 （scroll、removeAttribute、scrollBy） （append、prepend、remove、） （querySelector、querySelectorAll、insertAdjacentElement） |
| HTMLElement | 提供所有元素的基础类（className、事件中的on方法） |
| ... | 表示实现类 |
