一、从 JS 基础知识到 JS Web API
- JS 基础知识，规定语法（ECMA 262 标准）。
- JS Web API，网页操作的 API（W3C 标准）。
- 前者是后者的基础，两者结合才能真正实际应用。
二、DOM 本质
- DOM（Document?Object?Model，文档对象模型）是?JavaScript操作HTML文档的接口，使文档操作变得非常优雅、简便。
- DOM是JS操控HTML和CSS的桥梁。
- DOM最大的特点就是将文档表示为节点树。
- DOM是哪种基本的数据结构？ ——??树。
补充链接：DOM基本概念-CSDN博客。
三、DOM 节点操作
1. 获取 DOM 节点
补充链接：访问元素节点-CSDN博客。
2. attribute
- attribute 是HTML标签上的某个属性（特性），如‘type’,'id','value','class'以及自定义属性，它的值只能是字符串。
- 利用 setAttribute 和 getAttribute 来设置和获取属性。
使用示例：
3. property
- javascript 获取到的DOM节点对象，比如a 你可以将他看作为一个基本的js对象，这个节点对象包括很多属性((property)，比如“value”，“className”)。
常用的 property ：
? ? ? ? style：DOM 节点对象的样式。
? ? ? ? className：DOM 节点对象的 class 属性。
? ? ? ? nodeName：DOM 节点对象的名称。
? ? ? ? nodeType：DOM 节点对象的类型。
使用示例：
4. property 和 attribute 的区别
- attribute 节点都是在HTML代码中可见的，而property只是一个普通的名值对属性。
- property：修改对象属性，不会体现到htm结构中。
- attribute：修改htm属性，会改变htm结构。
- 两者都有可能引起 DOM 重新渲染。
四、DOM 结构操作
1. 新增/插入节点
- 添加新节点：创建新节点，向 DOM 树上的节点插入新节点。
- 移动节点：将已经挂载到DOM树上的节点成为appendChild()的参数，这个节点将会被移动。
补充链接：节点的创建、移除和克隆-CSDN博客。
2. 获取子节点列表、获取父节点
- 获取父节点
- 获取子元素节点（childNodes会获取所有的子节点，其中可能包括很多元素节点之外的其他节点）
3. 删除子节点
五、DOM 性能
- DOM操作非常“昂贵”,避免频繁的DOM操作。
- 对DOM查询做缓存。
- 将频繁操作改为一次性操作
- 关键在于创建一个文档片段：document.createDocumentFragment()。
