原生JS操作DOM的方法

JS操作DOM
1. DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
(1)元素节点：构成了DOM的基础。文档结构中，是根元素，代表整个文档，
其他的还有元素节点之间可以相互包含(当然遵循一定的规则)
(2)文本节点：包含在元素节点中。
(3)属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的

2. js中获取dom元素的方式有哪些？
//通过ID
var li = document.getElementById(“first”);
//通过类名
var lis1 = document.getElementsByClassName(“cls”);
//通过name属性
var lis2 = document.getElementsByName(“name”);
//通过标签名
var lis3 = document.getElementsByTagName(“li”);

3.获取节点
（1）parentNode: 获取当前节点的父节点
（2） childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）
children： 获取当前节点的所有元素子节点（不包含文本节点）
（3）firstChild： 获取第一个子节点，包括回车等文本节点
firstElementChild： 获取第一个元素节点。 不含文本节点
firstElementChild： 获取第一个元素节点。 不含文本节点
（4）lastChild： 获取最后一个子节点，包括回车等文本节点
lastElementChild： 获取最后一个子节点，不含文本节点
（5）previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点
previousElementSibling： 获取当前节点的前一个元素兄弟节点
（6）nextSibling：获取当前节点的后一个兄弟节点，包括文本节点
nextElementSibling：获取当前节点的后一个元素兄弟节点
（7）attributes: 获取当前节点的所有属性节点。 返回数组格式

4.创建并新增节点
（1）document.createElement(“标签名”)： 创建一个新节点，并将创建的新节点返回
需要配合setAttribute()为新节点设置属性
（2）父节点insertBefore(新节点,目标节点)： 在父节点中，将新节点插入到目标节点之前
父节点appendChild(新节点)： 在父节点的内部最后，插入一个新节点
（3） 源节点cloneNode(true)： 克隆一个节点
传入true表示克隆源节点以及源节点的所有子节点
传入false或不传，表示只克隆当前节点，而不克隆子节点

5. 删除、替换节点
（1） 父节点removeChild(子节点)： 从父节点中，删除指定子节点
（2） 父节点replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点

这个方法为更改分页器上文案，以下是页面展示