JS魔法堂：元素克隆、剪切技术研究

​一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　​

  当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素，也可以通过克隆已有元素的方式来获取一个新元素。而在部分浏览器中，通过复制来获取新元素的效率比通过 document.createElement 方式的要高一些，具体的性能比较如下：

2% in IE8, but no change in IE6 and IE7

Up to 5.5% in Firefox 3.5 and Safari 4

6% in Opera (but no savings in Opera 10)

10% in Chrome 2 and 3% in Chrome 3

  本篇将记录元素克隆、和剪切的相关技术，以便日后查阅。

  ​目录一坨​：

​​  二、拷贝​​

　　​​1. Node.cloneNode​​

　　​​2. document.importNode​​

  ​​三、剪切​​

　　​​1. document.adoptNode​​

　　​​2. appendChild、insertBefore和replaceChild​​

  ​​四、总结​​

 ​​ 五、题外话——IE独有的replaceNode和swapNode方法​​

​二、拷贝　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ​

​1、Node.cloneNode　　　　　　　　　　　　　　　　　　　　　　​

​浏览器支持​：所有浏览器均支持。

​作用​：拷贝元素自身。

​API规范​： {Node} Node.clone({boolean} [isDeep=false]) ，默认情况下仅拷贝元素本身，若入参为true时拷贝子孙元素也将被一同拷贝。

​实际测试效果​：

 注意：

    1. 使用cloneNode会将id特性也复制，因此需要手动修改副本的id特性。

    2. {Document} document和{HTMLDocument} document.documentElement也可以调用cloneNode方法拷贝自身，并且支持深拷贝。

    3. 当从其他文档中拷贝元素，元素副本的ownerDocument依然为其他文档的document对象，直到我们将元素副本添加到当前文档下，ownerDocument属性才会变化。

​2、document.importNode　　　　　　　　　　　　　　　　　　　　　　　​

​浏览器支持​：IE9+和其他现代浏览器均支持。

​作用​：拷贝其他文档中的元素到当前文档中。（​​https://developer.mozilla.org/en-US/docs/Web/API/document.importNode​​）

​API规范​： {Node} document.importNode({HTMLElement|HTMLDocument|HTMLDocumentFragment} externalNode [, {boolean} isDeep=true]) 

​实际测试效果​：

注意：

    1. 使用importNode会将id特性也复制，因此需要手动修改副本的id特性；

　 2. 不接受{Document} document的拷贝；

    3. 虽然规范中描述其作用为拷贝其他文档中的元素，但实际上是可以对当前文档的元素进行拷贝的；

    4. 当从其他文档中拷贝元素，元素副本的ownerDocument自动设置为当前文档的document对象。

​三、剪切　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　​

​1、document.adoptNode　　　　　　　　　　　　　　　　　　　　　　　​

​浏览器支持​：IE9+和其他现代浏览器均支持。

​作用​：剪切其他文档中的元素到当前文档中。（​​https://developer.mozilla.org/en-US/docs/Web/API/document.adoptNode​​）

​API规范​： {Node} document.adoptNode({HTMLElement|HTMLDocument|HTMLDocumentFragment} externalNode) 

​实际测试效果​：

注意：

　 1. 不接受{Document} document的剪切，但可以对{HTMLDocument} document.documentElement进行剪切；

    2. 虽然规范中描述其作用为拷贝其他文档中的元素，但实际上是可以对当前文档的元素进行拷贝的；

    3. 当从其他文档中拷贝元素，元素副本的ownerDocument自动设置为当前文档的document对象。

​2. appendChild、insertBefore和replaceChild​

  我们知道appendChild、insertBefore和replaceChild操作元素时会切断元素原来的位置关系，然后将其添加到新的树层级结构中。这不就是元素的剪切操作吗！于是我们可以通过appendChild、insertBefore和replaceChild方法将目标元素剪切到一个未加入DOM树的元素中，即可模拟document.adoptNode的功能了。

;(function(doc){
  var clipboard
  doc.adoptNode = doc.adoptNode || (clipboard = document.createElement('div'), function(node){
  　　clipboard.appendChild(node)
      return clipboard.lastChild
  })
}(document))

 ​实际测试效果​：

clipboard
的div元素

clipboard
的div元素

clipboard
的div元素

注意：

　 1. 不接受{Document} document和{HTMLDocument} document.documentElement的剪切，但可以对{HTMLBodyElement} document.body进行剪切；

    2. 当从其他文档中拷贝元素，元素副本的ownerDocument自动设置为当前文档的document对象。

​四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　​

   上述的元素拷贝操作均无法拷贝自定义属性和事件处理绑定，而jQuery的clone函数可实现这一点。

    尊重原创， ^_^肥子John

​五、题外话——IE独有的replaceNode和swapNode方法　　　　　　　　　​

   IE5.5~11还提供了 el.replaceNode({HTMLElement} otherEl) 和 el.swapNode(HTMLElement} otherEl) 两个方法， el.replaceNode({HTMLElement} otherEl) 作用是将el替换为otherEl并将el作为函数返回值， 此时el已经脱离了DOM树； el.swapNode(HTMLElement} otherEl) 作用是交换el和otherEl在树层级结构中的位置，两者均在DOM树中。  注意：这两个方法均为IE独有的。

欢迎添加我的公众号一起深入探讨技术手艺人的那些事！

如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！