JS-DOM(二）_操作节点

操作dom是我们经常要用的，下面我一一介绍如何操作节点

一、添加子节点
appendChild()添加子节点到最后，例子如下：

    <div>
        这是根
        <p class="first">老大</p>
        <p>老二</p>
        <p>老三</p>
    </div>
<script type="text/javascript">
    var oDiv=document.querySelector('div');
        var addNodes=document.createElement("p");
        addNodes.innerText="老小"
        oDiv.appendChild(addNodes);//添加到最后
</script>

如果需要把节点放在指定位置而不是结尾，可以使用insertBefore(),这个方法接收两个参数要插入的节点和作为参考的节点。在插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling）,同时被方法返回。如果参考节点是null,则insertBefore()和appendChild()一样。例子如下：

<script>
var oDiv=document.querySelector('div');
        var addNodes=document.createElement("p");
        addNodes.innerText="老小"
        oDiv.appendChild(addNodes);//添加到最后
        var old=document.querySelector('.first');
        oDiv.insertBefore(addNodes, old)//添加到老大之前
        // oDiv.insertBefore(addNodes,null);//参考节点为空则添加到最后
</script>

二、替换节点

前面介绍的appendChild()和insertBefore()方法都只插入节点，而不会移除节点。
//replaceChild()方法接收的两个参数是：要插入的节点和替换的节点。要替换的节点将由这个方法返回并从文档树中移除，同时由插入的节点占据其位置。例子如下：

    <div>
        这是根
        <p class="first">老大</p>
        <p>老二</p>
        <p>老三</p>
    </div>
    <script type="text/javascript">
        var oDiv=document.querySelector('div');
        var addNodes=document.createElement("p");
        addNodes.innerText="老小"
        oDiv.appendChild(addNodes);//添加到最后
        var old=document.querySelector('.first');
        //oDiv.insertBefore(addNodes, old)//添加到老大之前
        oDiv.insertBefore(addNodes,null);//参考节点为空则添加到最后

        var newAddNodes=document.createElement("p");
        newAddNodes.innerText="xin 老小";
        oDiv.replaceChild(newAddNodes, addNodes);//替换掉原来的
        oDiv.replaceChild(newAddNodes, old);//替换class为first的
</script>

三、移除节点

如果只想移除节点，则可使用removeChild();

<div>
        这是根
        <p class="first">老大</p>
        <p>老二</p>
        <p>老三</p>
    </div>
    <script type="text/javascript">
        //移除节点
        var oDiv=document.querySelector('div');
        var addNodes=document.createElement("p");
        addNodes.innerText="老小"
        var old=document.querySelector('.first');
        oDiv.insertBefore(addNodes,null);
        oDiv.removeChild(old);//移除老大
    </script>

四、复制节点

复制节点cloneChild() 该方法只接收一个布尔参数，如果为true则表示深度复制，及不光复制节点本身连其子节点也一并复制，如果为false则只复制节点本身，例子如下

    <div>
        这是根
        <p class="first">老大</p>
        <p>老二</p>
        <p>老三</p>
    </div>
    <script type="text/javascript">
        var oDiv=document.querySelector('div');
        var clone=oDiv.cloneNode(false);//只复制节点本身
        var oBody=document.querySelector('body');
        oBody.appendChild(clone);//把其添加到body后面，只会复制<div></div>不会复制其内容
    </script>

<div>
        这是根
        <p class="first">老大</p>
        <p>老二</p>
        <p>老三</p>
    </div>
<script type="text/javascript">
        var oDiv=document.querySelector('div');
        var clone=oDiv.cloneNode(true);//深度复制
        var oBody=document.querySelector('body');
        oBody.appendChild(clone);//把其添加到body后面
    </script>