一、从 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 是 dom 元素在⽂档中作为 html 标签拥有的属性；

• property 就是 dom 元素在 js 中作为对象拥有的属性。

• 对于 html 的标准属性来说，attribute 和 property 是同步的，是会⾃动更新的。

• 但是对于⾃定义的属性来说，他们是不同步的。

四、DOM 结构操作

1. 新增/插入节点

• 添加新节点：创建新节点，向 DOM 树上的节点插入新节点。

• 移动节点：将已经挂载到DOM树上的节点成为appendChild()的参数，这个节点将会被移动。

补充链接：节点的创建、移除和克隆-CSDN博客。

2. 获取子节点列表、获取父节点

• 获取父节点

• 获取子元素节点（childNodes会获取所有的子节点，其中可能包括很多元素节点之外的其他节点）

3. 删除子节点

五、DOM 性能

• DOM操作非常“昂贵”,避免频繁的DOM操作。
• 对DOM查询做缓存。

• 将频繁操作改为一次性操作
• 关键在于创建一个文档片段：document.createDocumentFragment()。