js中的节点操作

一、节点概念：
整个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);