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时拷贝子孙元素也将被一同拷贝。

实际测试效果

浏览器

复制子元素

标准属性(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函数可实现这一点。

五、题外话——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独有的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

web前端开发初学者十问集锦(1)

答:script标签可以放置在html文件的任何地方(any where),比如既可以放置在html标签外,也可以放置在head内,也可以放置在body内,也可...

801
来自专栏MixLab科技+设计实验室

设计师编程指南之Sketch插件开发 9 之 Shape中的oval

往期文章索引: 1 / 入门基本概念、page的相关操作 2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操...

3047
来自专栏对角另一面

读Zepto源码之Selector模块

Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。 在阅读本...

1970
来自专栏WindCoder

mybatis在xml文件中处理大于号小于号的方法(mybatis大于小于的转义)

SELECT * FROM test WHERE 1 = 1 AND start_date  <= CURRENT_DATE AND end_date &...

1001
来自专栏与神兽党一起成长

手工实现表单重置的部分功能

首先我必须说几乎所有的人都不需要自己实现表单重置的功能,表单重置功能只需要一个reset类型的input就足够了。<input type="reset" />

1383
来自专栏前端大白专栏

angular2报错 Expression has changed after it was checked

2563
来自专栏大前端_Web

jquery常用函数及技巧(持续更新)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1251
来自专栏分布式系统和大数据处理

Go语言Tips

转型到Go以后,因为语言的不熟悉,以往很常见的一些操作有时候也需要去Google一下。这里将一些结果记录下来,方便日后查阅。

1342
来自专栏阿凯的Excel

自定义单元格格式(判断版)

前两期分别介绍了自定义单元格格式的数字版、文本版。本期将分享最后一个内容,自定义单元格格式的条件判断。同时也会分享一些比较偏,比较少用的应用! 一、基础知识分...

2834
来自专栏Golang语言社区

golang(Go语言) byte/[]byte 与 二进制形式字符串 互转

效果 把某个字节或字节数组转换成字符串01的形式,一个字节用8个”0”或”1”字符表示。比如: byte(3) –> “00000011” []byte{1...

4417

扫码关注云+社区