标签：

上一篇主要是针对查询的，本文主要针对的是DOM的增删改

添加节点：

       1，appendChild() 用于向ChildNodes列表的末尾添加一个节点，返回新增的节点，如果传入到appendChild()中通的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新的位置。因此 如果在调用appendChild()传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点

 1 <div>
 2     <ul>
 3         <li>1</li>
 4         <li>2</li>
 5         <li>3</li>
 6     </ul>
 7 </div>
 8  var a=document.getElementsByTagName(‘ul‘)[0];
 9  var node1=a.firstElementChild;
10  var returnnode1=a.appendChild(node1);
11  alert(returnnode1== a.lastElementChild);  // true
12  alert(returnnode1== a.firstElementChild);  //  false  说明返回的就是添加的那个节点

2，insertBefore(),该方法接收两个参数 要插入的节点和作为参照的节点，插入后被插入的节点就会变成参考节点的前一个同胞节点，同时被方法返回 插入成为第一个子节点 则var returnNode=someNode.insertBefore (newNode,someNode.firstChild); alert(returnNode==someNode.lastElementChild); 插入成为最后一个子节点 第二个参数 为null 即可 这个方法的关键是要理解：会插入到参考节点的前面

删除节点

    removeChild() 该方法只接受一个参数 就是要删除的节点

替换节点

     replaceChild()   第一个参数为要插入的节点 第二个参数为要替换的节点

这个几个方法的共性是 操作的都是某个节点的子节点，使用之前必须先取到其父节点，另外不是所有类型的节点都有子节点（nodeType为 3，4，7，8，10，12的节点类型均为子节点）如果在这些节点上 调用上述方法会报错

其他方法：

      1，cloneNode()  用于常见创建调用这个方法的节点的一个完全的副本（该方法不复制javascript属性 如事件处理程序） 接受一个参数

      为true 执行深复制 复制该节点及其整个子节点树

      为false 执行浅复制 只复制该节点

     2，和上面方法相似的还有importNode() 方法  该方法是document 对象上的方法 接受两个参数 要导入的节点 和 一个bool值  当为true时 复制子孙节点 为false时只复制 本级节点

1 var a = document.getElementById(‘1123‘); 
2 var b = a.cloneNode(true); 
3 document.getElementById(‘aaaa‘).appendChild(b); 
4 var x=  document.importNode(a,true); 
5 document.getElementById(‘aaaa‘).appendChild(x);

注： 这两个方法复制的节点 可再次插入到之前的父节点中  这和上面的appendChild和insertBefore() 就有点区别了 appendChild() 和insertBefore() 如果插入已存在的节点则会将之前的节点指向新的位置 就是不能重复添加,但是cloneNode() 和importNode()  则产生的是一个新的对象 新的节点 因此能重复添加

 1       <div id="a1123"> 
 2            <ul id="uld"> 
 3                <li>123</li> 
 4            </ul> 
 5        </div>
 7             var a = document.getElementById(‘uld‘); 
 8             var b = a.cloneNode(true); 
 9             document.getElementById(‘a1123‘).appendChild(a);//添加已存在的节点-无效果 
10             document.getElementById(‘a1123‘).appendChild(b);//添加克隆后的节点 能添加
11             var x=  document.importNode(a,true);
12             document.getElementById(‘a1123‘).appendChild(x);//添加导入后的节点 能添加

参考自：《JavaScrpt高级程序设计》 《JavaScrpt权威指南JavaScrpt》

DOM增删改

标签：

原文地址：http://www.cnblogs.com/ArthurXml/p/5391820.html