前端面试之DOM树

二、DOM树

什么是DOM

文档对象类型，是 W3C 组织推荐的处理可扩展标记语言的标准编程接口

通过这些 DOM 接口可以改变网页的内容、结构和样式

深层理解：从网络传给渲染引擎的HTML文件字节流无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。DOM 提供了对 HTML 文档结构化的表述

DOM分类

核心DOM：是用于XML与HTML的共用接口；
XMLDOM：XML专用接口；
HTML DOM：HTML专用接口；
DOM事件模型：定义DOM能够响应的事件；
CSS DOM：CSS专用接口

DOM 作用

1、从页面的视角看，DOM是生成页面的基础数据结构
2、从javascript脚本的视角看，DOM提供了一些常见的操作接口，通过这套接口可以直接对文档进行结构，样式的操作。
JS中DOM元素的操作
3、从安全的视角来看、DOM是一道安全防线，把一些不安全的内容在DOM解析阶段就拒之门外、

DOM的生成

第一个阶段，通过分词器将字节流转换为 Token。
第二个和第三个阶段是同步进行的，需要将 Token 解析为 DOM 节点，并将 DOM 节点添加到 DOM 树中。

js如何影响DOM树

我们都知道html树是从上到下的执行，在执行过程中遇到js脚本时，会暂停执行html，先执行js脚本，因为接下来的js可能会修改当前的DOM结构，

js引擎介入执行js，如果js脚本中有修改html节点的，先修改html。
当js脚本全都执行完成后，html解析器继续执行。直到DOM完成
这也是为什么js需要异步加载和js脚本需要放在最后的原因
如果js中没有DOM操作。可以使用js异步加载
js异步加载的三种方式
外部js的流程和内嵌的js不一样
当浏览器执行到js文件时，会先下载js文件，（暂停解析来下载js文件）
js中有操作DOM部分的代码，回到主线程上操作DOM后继续执行js
js中如果有操作css外部样式表的，需要先下载外部样式表之后在进行操作。

总结

关于DOM ，我们需要学习的就是js常见的操作DOM 的事件和属性 理解DOM 的原理之后也就好理解为什么js脚本需要放在html底部和延迟加载了（优化的时候会考到）

常见的DOM操作