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
本篇将记录元素克隆、和剪切的相关技术,以便日后查阅。
目录一坨:
2. appendChild、insertBefore和replaceChild
五、题外话——IE独有的replaceNode和swapNode方法
浏览器支持:所有浏览器均支持。
作用:拷贝元素自身。
API规范: {Node} Node.clone({boolean} [isDeep=false]) ,默认情况下仅拷贝元素本身,若入参为true时拷贝子孙元素也将被一同拷贝。
实际测试效果:
浏览器 | 复制子元素 | 标准属性(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属性才会变化。
浏览器支持: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. 使用cloneNode会将id特性也复制,因此需要手动修改副本的id特性;
2. 不接受{Document} document的拷贝;
3. 虽然规范中描述其作用为拷贝其他文档中的元素,但实际上是可以对当前文档的元素进行拷贝的;
4. 当从其他文档中拷贝元素,元素副本的ownerDocument自动设置为当前文档的document对象。
浏览器支持: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
|
当前文档的document对象 |
Chrome | √ | √ | √ | √ | √ | √ | √ | 充当
clipboard |
当前文档的document对象 |
FF | √ | √ | √ | √ | √ | √ | √ | 充当
clipboard |
当前文档的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独有的。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。