操作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>