本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用
一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最后面
用法:
someNode.appendChild( newNode )
someNode通常为元素的父节点
返回值:
返回新增加的节点
1
2
3
4
上例，把文本框的内容当做一个新节点，添加在id为box的元素的最后面，返回值returnNode就是新增加的节点，
所以 第12行和第13行的返回值为ture, lastChild表示元素的最后一个子节点
如果appendChild后面的参数是文档现有的节点，那么表示把当前节点移动到父元素的最后面
1
2
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