本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用

一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最后面

用法:

someNode.appendChild( newNode )

someNode通常为元素的父节点

返回值:

返回新增加的节点

1      2      3     
     
 4     

上例，把文本框的内容当做一个新节点，添加在id为box的元素的最后面，返回值returnNode就是新增加的节点，

所以 第12行和第13行的返回值为ture, 表示元素的最后一个子节点

如果appendChild后面的参数是文档现有的节点，那么表示把当前节点移动到父元素的最后面

1  2     
     
       3         
      
王朝
 4         
      
马汉
 5         
      
张龙
 6         
      
赵虎
 7         
      
ghostwu
 8     
     
 9     

上例，每次点击按钮，把第一个节点移动到最后，所以在第18行为false, 因为移动之后，他就不是第一个节点了，而变成最后一个节点，所以第19行比较结果为true

二、insertBefore：向一个元素前面追加节点

用法:

someNode.insertBefore( newNode, referNode );

第一个参数: newNode，需要插入的节点

第二个参数: referNode, 参考节点，即：newNode会插入到这个参考节点的前面，

注意：如果第二个参数为null, 效果等同于someNode.appendChild( newNode )

返回值:

新插入的节点

1      2      3     
     
 4     

 三、removeChild: 移除一个节点

someNode.removeChild( node )

someNode通常为父元素，node就是父元素下面的一个元素

返回值: 当前被移除的元素

1  2      3     
     
       4         
      
1
 5         
      
2
 6         
      
3
 7         
      
4
 8     
     
 9     

 

 上例，在输入框中， 输入需要移除的子节点的索引，即可完成移除节点操作.

四、replaceChild: 用新节点去替换已经存在的节点

用法

someNode.replaceChild( newNode, node )

第一个参数：新节点

第二个参数: 被替换的节点

返回值: 返回当前被替换的子节点

 下例，有点小复杂，用了节点缓存（设计模式中的享元模式）提高替换节点的性能，虽然只有8个节点，如果是上万个节点，会有明显的提高.

1  2     
 3     第1个元素 4     第2个元素 5     第3个元素 6     第4个元素 7     第5个元素 8     第6个元素 9     第7个元素10     第8个元素11     

 

 五、cloneNode: 复制一个节点

用法:

someNode.clone( bool值 )

参数有两种情况:

如果为true: 代表深拷贝: 即复制当前节点和他下面的所有子节点，如果存在行间事件，也会被复制

如果为false: 代表浅拷贝：即复制当前节点，不会复制他下面的子节点

返回值：返回当前被复制的元素

1  2      3     
     
       4         
      
1
 5         
      
2
 6         
      
3
 7         
      
4
 8     
     
 9