JS-节点操作（获取节点对象的方法、节点的类型名称内容、删除新增克隆写入）

一,节点操作
    1,什么是节点操作
        页面中的所有内容,都是节点,通过获取节点,可以操作文档中的内容
        另一中 DOM 操作的方式

        多用于克隆 和 向页面中写入标签

    2,获取节点的方式  12个
        标签对象.childNodes              获取子级所有的节点
        标签对象.children                获取子级的元素节点标签节点
        标签对象.firstChild              获取第一个子级节点
        标签对象.lastChild               获取最后一个子级节点
        标签对象.firstElementChild       获取第一个子级元素节点
        标签对象.lastElementChild        获取最后一个子级元素节点
        标签对象.previousSibling         获取上一个兄弟节点
        标签对象.nextSibling             获取下一个兄弟节点
        标签对象.previousElementSibling  获取上一个兄弟元素节点
        标签对象.nextElementSibling      获取下一个兄弟元素节点
        标签对象.parentNode              获取直接父级节点
        标签对象.attributes              获取所有的属性节点

    3,节点的类型,节点的名称,节点的内容

        节点的类型: 标签对象.nodeType
            元素节点 : 1
            属性节点 : 2
            文本节点 : 3
            注释节点 : 8

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

        节点的内容: 标签对象.nodeValue
            元素节点 : null
            属性节点 : 属性值
            文本节点 : 文本内容
            注释节点 : 注释内容

    4,节点操作

        创建: 创建的是一个标签对象
            元素节点:
                var ele = document.createElement('标签名称')

                创建元素节点之后,可以通过标签对象本身的属性来进行操作
                    ele.id = 属性值
                    ele.ClassName = 属性值
                也可以通过 setAttribute() 来设定属性和属性值
            文本节点
                var ele = document.createTextNode('标签名称')

        删除: 删除当前标签中的子级节点
            标签对象.removeChild('你要删除的节点')

        克隆: 
            标签对象.cloneNode()        只克隆标签本身
            标签对象.cloneNode(true)    克隆标签本身和标签内容


        写入:
            在当前标签末位,添加节点
                标签对象.appendChild('要写入的标签')

            在当前标签,某个子级标签之前,添加节点
                标签对象.insertBefore('要写入的标签' , 要写在哪个子级节点之前)

一.节点操作

基本概念
    复制标签,会使用克隆方法
    写入标签时,会使用节点操作方法


什么是节点?
    整个的HTML文件,其中的所有内容,都视为HTML文件的一个节点对象
    可以通过操作这些节点对象,来操作HTML文件   

    起始节点操作,就是另一种 DOM 操作,也是获取对象,操作对象

    只是节点操作,比 DOM 操作,更加复杂更加丰富

节点的类型
    之前的 DOM 操作,只能获取标签对象
    现在的 节点 操作,可以获取标签对象,可以获取内容对象,可以获取属性对象,甚至可以获取注释内容

通过节点,获取的对象,和通过 DOM方法获取的对象,实际上,是相同意义上的对象

关键一点: 不管是 DOM方式 还是 节点方式 获取的标签对象,内容可能不同,形式是完全一致的
            DOM方式 获取的标签对象,支持节点操作
            节点方式 获取的节点对象,支持DOM操作
            只要正确的获取对象,之后想怎么操作,怎么操作

二.节点操作之获取节点对象

// 获取节点对象的方法

var oDiv = document.querySelector('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,获取当前标签,上一个兄弟节点(找哥哥)
// 如果没有执行结果是null
console.log( oDiv.previousSibling );

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

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

三.节点操作之类型名称内容

节点的类型,名称,内容

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

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

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

四.节点操作之 新增、删除、克隆、写入

<div>我是建立的div标签</div>
<script>
节点的操作
节点的 新增 删除 克隆 写入

节点的创建
创建标签节点: 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);