1. DOM
1.1 什么是DOM ？
DOM(文档对象模型)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。
W3C DOM提供了一套用于HTML和XML文档的标准对象，以及访问这些文档的标准接口(方法)。
DOM与具体的编程语言无关，可以在C、JavaScript、ActionScript、Java等语言中实现。
1.2 HTML节点树
HTML文档是一种树状的结构化文档，各标记之间是一种树状的层次关系。在JS中，所有的HTML内容都可以当成是一个对象来使用，都有对应的属性和方法。
节点：
- 由结构图中我们可以看到，整个文档就是一个文档节点
document - 而每一个
HTML标签都是一个元素节点element - 标签中的文字则是文本中节点（回车，空格也是文本节点）
text - 标签的属性是属性的节点
attribute - 一切的节点都是
node
DOM 是针对xml(html)的基于树的API。
DOM树：节点(node)的层次。
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）。
DOM定义了Node的接口以及许多种节点类型来表示xml(html)节点的多个方面。
2. DOM节点操作
HTML文档中的每一个成员都是一个节点对象，节点对象具有自己的属性和方法。
2.1 特殊节点
2.1.1 HTML节点
document.documentElement => HTML标签
可返回存在于XML以及HTML文档中的文档根节点
2.1.2 body节点
document.body => body标签
对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。如果我们要对页面上添加显示元素，一般来说会使用这种方式。
注意区别：
document.documentElement.clientHeight它拿到的是整个窗口高度document.body.clientHeight它拿到的是内容的高度
2.2 节点分类
| nodeName | nodeValue | nodeType | |
|---|---|---|---|
| Element（元素） | 标签名 | null | 1 |
| Attribute（属性） | 属性名 | 属性的值 | 2 |
| Text（文本） | #text | 文本的内容 | 3 |
2.3 Node对象的属性与方法总表
| 查询节点 | ||
|---|---|---|
| 方法 | getElementByID(); | 返回对拥有指定ID的第一个对象的引用 |
| getElementsByName(); | 返回带有指定名称的对象集合 | |
| getElementsByTagName(); | 返回带有指定标签名的对象的集合 | |
| getElementsByClassName(); | 返回带有指定类名的对象的集合 | |
| querySelector(); | HTML5新增，返回选择器匹配到的第一个元素 | |
| querySelectorAll(); | HTML5新增，返回选择器匹配到的元素集合 | |
| 属性 | parentNode | 父节点 |
| firstElementChild | 列表中的第一个就节点 | |
| lastElementChild | 列表中的最后一个节点 | |
| childNodes | 所有子节点的列表 | |
| children | 所有元素子节点的列表 | |
| previousElementSibling | 上一个兄弟节点 | |
| nextElementSibling | 下一个兄弟节点 | |
| 增加节点 | ||
| append(); | 在节点内容后追加节点 | |
| insertBefore(); | 指定节点前插入节点 | |
| 修改节点 | ||
| replaceChild() | 替换节点 | |
| 删除节点 | ||
| removeChild() | 删除子节点 | |
| remove() | 删除当前节点 | |
| 创建节点 | ||
| createElement() | 创建一个元素节点 | |
| setAttribute() | 给某个节点添加一个属性 | |
| getAttribute() | 获取某个节点属性的值 |
2.4 节点举例
2.4.1 查询节点
<body>
<ul id="parent">
<li>第一行</li>
<li id="two">第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
<script>
//查询two的父节点
//1. 获取two节点
var two = document.getElementById("two");
//2. 查询two的父节点
var parObj = two.parentNode;
console.log(parObj);
//查询parent中第一个子节点
//1. 找到parent
var parent = document.getElementById("parent");
//2. 找第一个子节点
console.log(parent.firstChild);
//查询parent中第最后一个子节点
//1. 找到parent
var parent = document.getElementById("parent");
//2. 找最后一个子节点
console.log(parent.lastChild);
//查询所有子节点列表：
//1. 找到parent
var parent = document.getElementById("parent");
//2. 所有子节点
console.log(parent.childNodes);
//查找two的上一个兄弟
//1. 获取two节点
var two = document.getElementById("two");
//2. 查找two的上一个兄弟
var preObj = two.previousSibling;
console.log(preObj);
</script>
</body>
2.4.2 增加节点
<body>
<ul id="parent">
<li>第一行</li>
<li id="two">第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
<script>
//需求： 在parent中添加一个新节点
//1. 创建一个新节点；
//1.1 创建元素节点
var liobj = document.createElement("li");
//1.2 创建属性节点
liobj.className = "xxx";
//1.3 创建文本节点
liobj.innerHTML = "<p>我是新增的段落</p>";
//2. 把新节点添加到parent中
//2. 1 获取parent节点
var parent = document.getElementById("parent");
//2. 2 在parent中追加新节点
parent.appendChild(liobj);
//需求：在two节点之前插入新节点
//1. 创建新节点
//1.1 创建元素节点
var liobj = document.createElement("li");
//1.2 创建属性节点
liobj.className = "yyy";
//1.3 创建文本节点
liobj.innerHTML = "我是新节点";
//2. 找到要在哪个节点之前添加
var two = document.getElementById("two");
//3. 具体添加
//3. 1 获取parent节点
var parent = document.getElementById("parent");
//3. 2具体添加
parent.insertBefore(liobj,two);
</script>
</body>
2.4.3 修改节点
<body>
<ul id="parent">
<li>第一行</li>
<li id="two">第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
<script>
//需求： 用新节点替换two节点
//1. 创建新节点
//1.1 创建元素节点
var liobj = document.createElement("li");
//1.2 创建属性节点
liobj.className = "xxx";
//1.3 创建文本节点
liobj.innerHTML = "<p>我是新增的段落</p>";
//2. 获取要替换的节点
var two = document.getElementById("two");
//3. 替换
//3.1 获取父元素
var parent = document.getElementById("parent");
//3.2 用新元素替换旧元素
parent.replaceChild(liobj,two);
//4. 替换属性节点
liobj.className = "aaa";
</script>
</body>
2.4.4 删除节点
<script>
//需求： 删除two节点
//1. 获取父元素
var parent = document.getElementById("parent");
//2. 删除指定节点
//2.1 获取要删除的节点
var two = document.getElementById("two");
//2.2 删除
parent.removeChild(two);
</script>
3. 文本内容操作
3.1 innerHTML：可以操作元素对象中的HTML代码（带有标签的文本）
- 获取
HTML：node.innerHTML - 设置
HTML：node.innerHTML= 值
3.2 innerText：可以操作元素对象中的文本（不带标签的纯文本）
- 获取文本：
node.innerText - 设置文本：
node.innerText= 值
3.3 textContent：可以操作文本节点或元素节点中的文本（推荐）
- 获取文本：
node.textContent - 设置文本：
node.textContent= 值
4. 样式操作
4.1 style行内样式
在获取到HTML节点后，可以对节点的样式进行操作，最常见的就是直接使用style属性。 style属性将作为HTML节点的行内样式进行使用，优先级高，使用便捷。
- 获取行内样式：
node.style.样式属性名; - 设置行内样式：
node.style.样式属性名 = '值';
举例：
注意：在使用css属性时，如果名称中有 - 时，必须改写成驼峰命名。
4.2 类名 className
正常情况下，HTML的属性可以直接当成节点属性使用，但是 class是个例外，因为class在JS中是保留字，用于实现ES6的类，所以在使用类名时，必须改成 className来使用。
- 获取类名：
node.className; - 设置类名：
node.className = '类名';
举例：
5. 属性操作
5.1 原生属性
HTML标签自带的属性，W3C标准规定HTML标签所拥有的属性都是原生属性。原生属性可以直接当成节点对象的属性进行操作。
- 获取属性：
node.属性名; - 设置属性：
node.属性名 = 属性值;
举例：
注意：HTML中的单属性也可叫布尔值属性，直接赋值布尔值，获取到的也是布尔值
5.2 自定义属性
在HTML标签上，用户可以自定义属性，只要符合HTML标签的语法格式就行，自定义属性不能直接当成节点对象的属性操作，必须使用相应的方法来实现。
- 获取属性：
node.getAttribute('属性名'); - 设置属性：
node.setAttribute('属性名','值');
举例：
