DOM节点

【查看/设置文本节点】

1、.innerHTML: 取到或设置一个节点中的HTML代码。

2、.innerText: 取到或设置一个节点中的文本，不能设置HTML代码。

二、层次节点操作

1. .childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。

.children： 获取当前节点的所有元素子节点（不包含文本节点）。

2. .parentNode: 获取当前节点的父节点。

3. .firstChild： 获取第一个子节点，包括回车等文本节点；

.firstElementChild： 获取第一个元素节点。 不含文本节点；

.lastChild： 获取最后一个子节点，包括回车等文本节点；

.lastElementChild： 获取最后一个子节点，不含文本节点；

4. .previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；

.previousElementSibling： 获取当前节点的前一个元素兄弟节点；

.nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；

.nextElementSibling：获取当前节点的后一个元素兄弟节点；

5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。

【创建并新增节点】

1. document.createElement("标签名")： 创建一个新节点，并将创建的新节点返回。

需要配合.setAttribute()为新节点设置属性。

2. 父节点.insertBefore(新节点,目标节点)： 在父节点中，将新节点插入到目标节点之前。

父节点.appendChild(新节点)： 在父节点的内部最后，插入一个新节点。

3. 源节点.cloneNode(true)： 克隆一个节点。

传入true表示克隆源节点以及源节点的所有子节点；

传入false或不传，表示只克隆当前节点，而不克隆子节点。

【删除、替换节点】

1. 父节点.removeChild(子节点)： 从父节点中，删除指定子节点。

2. 父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。