JavaScript之节点

一，操作节点

1.新增节点  appendChild 方法

参数（新增节点）

var body = document.body;
            //新增节点插入body中 createElement 新增元素 新增标签
            var newNode = document.createElement('div');
            //给标签设置内容 textContent innerHTML innerText
            newNode.textContent = 'four';
            //插入新增节点
            body.appendChild(newNode);

设置三个div 

<div>one</div>
    <div>two</div>
    <div>three</div>

新增节点后：

 2. 插入节点  insertBefore(插入的节点，参考的节点)

//获取参考节点
            var second = body.children[1];
            body.insertBefore(newNode, second)

将four盒子插入到two盒子之前 （two盒子下标为1） 

 3.替换节点  replaceChild（新节点，被替换的节点）

var second = body.children[0];
body.replaceChild(newNode, second)

 将one盒子替换为four盒子（one盒子下标为0）

4.删除节点  removeChild（要移除的某个节点）

var second = body.children[0];
body.removeChild(second)

 将one盒子删除

 二，克隆节点

 克隆节点，被克隆节点调用  

cloneNode()参数 ：（true深克隆）  （false浅克隆）  默认false

给定三个盒子

<div>one</div>
    <div class="second">two</div>
    <div>three</div>

script标签中写（浅克隆）：

var second = document.body.children[1];
var four = second.cloneNode();//表示进行浅克隆 默认值false

克隆的只有盒子本身没有盒子里的内容

深克隆

var four = second.cloneNode(true);

深克隆和浅克隆的区别

1.浅克隆至科隆节点本身 不克隆节点内容

2.深克隆既克隆本身又克隆内容

三，获取节点内容

textContent 获取节点内容

<div>我是一个块级元素</div>
    <div>我是一个块级元素
        <div>我是一个div</div>
    </div>
    <div>我是 一个 标签</div>

  在script标签中写

var first = document.body.children[0];
            var second = document.body.children[1];
            var three = document.body.children[2];
            console.log(first.textContent, '1');
            console.log(second.textContent, '1');
            console.log(three.textContent, '1');

打印结果;