Javascript节点的操作

什么是节点?
整个的HTML文件，其中的所有内容都视为HTML文件的一个节点对象，可以通过操作这些节点对象来操作HTML文件
起始节点操作就是另一种DOM操作，也是获取对象、操作对象，只是节点操作比DOM操作更加复杂更加丰富

节点的类型
之前的DOM操作只能获取标签对象，现在的节点操作不仅可以获取标签对象，也可以获取内容对象，还可以获取属性对象，甚至可以获取注释内容
通过节点获取的对象，和通过DOM方法获取的对象，实际上是相同意义上的对象。关键一点: 不管是DOM方式还是节点方式获取的标签对象，内容可能不同，形式是完全一致的
DOM方式获取的标签对象支持节点操作，节点方式获取的节点对象支持DOM操作，只要正确的获取对象，之后想怎么操作就怎么操作

获取节点对象的方法var oDiv = document.querySelector('div')

<div name="div" index="1" href="aaa" checked>我是标签div
<!-- 我是注释2 -->
<span>我是标签span</span>
</div>

1.获取当前标签中所有的子级节点，执行结果是一个伪数组，可以forEach()遍历，形式与querySelectorAll()获取的伪数组是一样的console.log( oDiv.childNodes );

2.获取当前标签中所有的元素节点/标签节点，执行结果是一个伪数组，不能forEach()遍历console.log( oDiv.children );

3.获取当前标签中第一个节点，执行结果是一个对象，内容形式与DOM操作方式获取的内容是一样的console.dir( oDiv.firstChild );

4.获取当前标签中最后一个节点，执行结果是一个对象，内容形式与DOM操作方式获取的内容是一样的console.dir( oDiv.lastChild ); console.dir( document.querySelector('span') );

5.获取当前标签中第一个标签节点，其他节点不会获取console.log( oDiv.firstElementChild );

6.获取当前标签中最后一个标签节点，其他节点不会获取console.log( oDiv.lastElementChild );

7.获取当前标签上一个兄弟节点(找哥哥)，如果没有执行结果是nullconsole.log( oDiv.previousSibling );

8.获取当前标签下一个兄弟节点(找弟弟)，如果没有执行结果是nullconsole.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 );

总结：①通过节点操作获取的对象/伪数组与通过DOM操作的对象/伪数组，形式上是一致的，可以相互操作。DOM方法可以操作节点对象，节点方法可以操作DOM对象
②执行结果伪数组/对象，伪数组有的可以forEach，有的不能forEach

节点的类型: 对象.nodeType 属性中存储数据是一个数值
元素节点/标签节点 : 1
属性节点 : 2
文本节点 : 3
注释节点 : 8

节点的名称: 对象.nodeName
元素节点/标签节点 : 大写字母的标签名称
属性节点 : 小写字母的属性名称
文本节点 : #text
注释节点 : #comment

节点的内容: 对象.nodeValue
元素节点/标签节点 : null
属性节点 : 属性的属性值
文本节点 : 文本内容，包括换行和空格
注释节点 : 注释内容，包括换行和空格

创建标签节点: document.createElement(‘标签名称’);创建的是一个标签对象，之前是设定字符串写入HTML文件，浏览器执行为标签效果
创建文本节点: document.createTextNode(‘要创建的文本内容’);现在创建的是一个对象，要操作标签的内容属性属性值等，必须要通过对象的方法来设定

var oDiv = document.createElement('div');
// 使用操作对象的方式给标签添加设定
oDiv.id = 'div1';
// setAttribute来设定自定义属性
oDiv.setAttribute('index' , 1);
console.dir(oDiv);

var oText = document.createTextNode('要创建的文本内容');
console.log(oText);

删除节点：删除当前标签中的子级节点
当前标签.removeChild(‘你要删除的节点’)

克隆节点：克隆复制当前节点对象
只克隆标签本身 当前标签.cloneNode();
克隆标签以及标签内容 当前标签.cloneNode(true);

写入节点 ：
当前标签.appendChild(你要写入的标签对象) 在当前标签结束位置写入
当前标签.insertBefore(你要写入的标签对象 , 在哪个子级标签前) 在当前标签子级标签之前写入

一个标签对象只会出现在最后一次写入的位置，相对对于将一个标签对象多次写入，从上一个位置会移动到下一个位置，只会出现在最后一个位置

var d = document.querySelector('div');
d.appendChild(oText);
d.insertBefore(oDiv , d.firstChild);
d.appendChild(oDiv);