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

页面导航:首页 > 网络编程 > JavaScript > JS魔法堂:元素克隆、剪切技术研究

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

来源: 作者: 时间:2016-02-05 11:06 【

一、前言 当需要新元素时我们可以通过 document createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新
一、前言                                  
 
  当需要新元素时我们可以通过 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时拷贝子孙元素也将被一同拷贝。
 
实际测试效果:
 
浏览器 复制子元素 标准属性(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. 使用cloneNode会将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函数可实现这一点。
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<