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

浏览器	复制子元素	标准属性(property)	标准特性(attribute)	自定义特性(customize attribute)	自定义属性(expando)	DOM0事件处理函数	DOM2事件处理函数	parentNode和 parentElement的值	ownerDocument
IE5.5~8	√	√	√	√	√（浅复制）	Χ	Χ	null	不变
IE9+	√	√	√	√	Χ	Χ	Χ	null	不变
Chrome	√	√	√	√	Χ	Χ	Χ	null	不变
FF	√	√	√	√	Χ	Χ	Χ	null	不变

注意：

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])

实际测试效果：

浏览器	复制子元素	标准属性(property)	标准特性(attribute)	自定义特性(customize attribute)	自定义属性(expando)	DOM0事件处理函数	DOM2事件处理函数	parentNode和 parentElement的值	ownerDocument
IE9+	√	√	√	√	Χ	Χ	Χ	null	当前文档的document对象
Chrome	√	√	√	√	Χ	Χ	Χ	null	当前文档的document对象
FF	√	√	√	√	Χ	Χ	Χ	null	当前文档的document对象

注意：

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)

实际测试效果：

浏览器	复制子元素	标准属性(property)	标准特性(attribute)	自定义特性(customize attribute)	自定义属性(expando)	DOM0事件处理函数	DOM2事件处理函数	parentNode和 parentElement的值	ownerDocument
IE9+	√	√	√	√	√	√	√	null	当前文档的document对象
Chrome	√	√	√	√	√	√	√	null	当前文档的document对象
FF	√	√	√	√	√	√	√	null	当前文档的document对象

注意：

　 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))

实际测试效果：

浏览器	复制子元素	标准属性(property)	标准特性(attribute)	自定义特性(customize attribute)	自定义属性(expando)	DOM0事件处理函数	DOM2事件处理函数	parentNode和 parentElement的值	ownerDocument
IE9+	√	√	√	√	√	√	√	充当 clipboard 的div元素	当前文档的document对象
Chrome	√	√	√	√	√	√	√	充当 clipboard 的div元素	当前文档的document对象
FF	√	√	√	√	√	√	√	充当 clipboard 的div元素	当前文档的document对象

注意：

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

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

四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4176612.html ^_^肥子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独有的。

posted @ 2014-12-21 20:14 ^_^肥仔John 阅读(4239) 评论(0) 编辑收藏举报

刷新页面返回顶部

^_^肥仔John

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

公告