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>