一、节点概念：
整个HTML文件，其中所有的内容，都视为HTML文件的一个节点对象，可以通过操作节点对象，来操作HTML文件。
1、起始节点操作，就是另一种DOM操作，也是获取对象、操作对象，但节点操作比DOM操作更加复杂、更加丰富
2、与DOM的操作区别：DOM操作只能获取标签对象，节点操作能获取标签对象、内容对象、属性对象、注释内容。
3、特点：
A、在复制标签时会用克隆方法，而在写入标签时会使用节点操作
B、不管是DOM方式，还是节点方式 获取的标签对象,内容可能不同,形式是完全一致的
C、DOM方式 获取的标签对象,支持节点操作；节点方式 获取的节点对象,支持DOM操作
D、只要正确的获取对象,之后想怎么操作,怎么操作
二、操作方法：
var oDiv = document.querySelector('div');
1、获取子级标签节点,执行结果是一个伪数组可以forEach循环
console.log(oDiv.childNodes);
2、获取标签的元素节点/标签节点，结果是一个伪数组，但不能被forEach()循环
console.log(oDiv.children);
3、获取当前标签中第一个节点，执行结果是一个对象,内容形式与DOM操作方式,获取的内容是一样的
console.log(oDiv.firstChild);
4、获取标签最后一个节点，执行结果也是一个对象,内容形式与DOM操作方式,获取的内容是一样的
console.log(oDiv.lastChild);
5、获取当前标签中，第一个标签节点，其他节点不会获取
console.log(oDiv.firstElementChild);
6、获取当前标签中，最后一个节点，其他节点不会获取
console.log(oDiv.lastElementChild);
7、获取当前标签，上一个兄弟节点（找哥哥）
console.log(oDiv.previousSibling);
8、获取当前标签，下一个兄弟标签（找弟弟）
console.log(oDiv.nextSibling);
9、获取当前标签上一个兄弟元素节点（找标签哥哥）
console.log(oDiv.previousElementSibling);
10、获取当前标签下一个兄弟元素节点，找标签弟弟
console.log(oDiv.nextElementSibling);
11、获取当前标签，父级节点（直接获取父级）
console.log(oDiv.parentNode);
console.log(document.querySelector('span').parentNode)
12、获取当前标签所有属性的节点，执行结果是一个伪数组，不能被forEach循环
console.log( oDiv.attributes );
总结：
A:通过节点操作获取对象/伪数组与通过DOM操作的对象/伪数组，形式上是一致的，可以互相操作
B、执行结果上，有的伪数组可以forEach循环，有的不能forEach循环
三、节点操作的类型，名称，内容：
1、节点的类型: 对象.nodeType 属性中存储,数据是 一个数值
元素节点/标签节点 : 1
属性节点 : 2
文本节点 : 3
注释节点 : 8
2、节点的名称: 对象.nodeName
元素节点/标签节点 : 大写字母的 标签名称
属性节点 : 小写字母的 属性名称
文本节点 : #text
注释节点 : #comment
3、节点的内容: 对象.nodeValue
元素节点/标签节点 : null
属性节点 : 属性的属性值
文本节点 : 文本内容,包括换行和空格
注释节点 : 注释内容,包括换行和空格
四、节点的获取、新增、删除、克隆、写入
1、新建标签及文本
document.createElement('标签名称');
var oDiv = document.createElement('div');
console.dir(oDiv);
document.createTexNode('要创建的文本内容')
var oText = document.createTexNode('要创建新增的内容')
console.log(oText);
2、删除节点
标签对象.removeCgild('需要删除的节点')
3、克隆节点
标签对象.clone() 只克隆标签本身
标签对象.clone(true) 克隆标签本身和标签内容
4、写入节点
A、在当前标签末位,添加节点
标签对象.appendChide
B、在当前标签,某个子级标签之前,添加节点
标签对象.insertBefore('要写入的标签' , 要写在哪个子级节点之前)
var d = document.querySelector('div'); d.appendChide(oText); d.insertBefore(oDiv,d.firstChild); d.appendChide(oDiv);