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树，改变页面视图