DOM结构（DOM树） 如何去优化DOM结构（DOM层级尽量小）
1. Document Object Model （简称DOM）既文档对象模型
文档：就是我们的html页面
文档对象：是页面中的元素
文档对象模型：为了能够让程序--js去操作页面中的元素而定义的标准，通过 DOM，可访问 HTML 文档的所有元素
把整个文档看成一棵树，树分支就是节点，同时定义了很多方法来操作这些节点，如下图是一个将html代码分解成的DOM树：
DOM树中三种常见的DOM节点:
1>元素节点：上图中、、等都是元素节点，即标签
2>文本节点：向用户展示的内容，如...中的"文档标题"文本
3>属性节点：元素的属性，如标签的链接地址属性 href
4>通过getElementById和document.body等方法获取元素就是获取元素节点的
2. DOM结构优化
- 减少DOM访问次数
- 多次访问同一DOM，应该用局部变量缓存该DOM
- 尽可能使用querySelector，而不是使用获取HTML集合的API
- 注意重排和重绘
- 使用事件委托，减少绑定事件的数量
浏览器工作的过程：
- 从网络或本地拿到html源代码
- 浏览器将html源码中的每个标签都实例化对应的对象
- 在内存中形成一个DOM树
- 将内存DOM树解析为可视页面
- JS直接修改DOM树，改变页面视图