一、前言                                  

当需要新元素时我们可以通过 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函数可实现这一点。

尊重原创,转载请注明来自: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独有的。

JS魔法堂:元素克隆、剪切技术研究的更多相关文章

  1. JS魔法堂:LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  2. JS魔法堂:IMG元素加载行为详解

    一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...

  3. JS魔法堂:jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

  4. JS魔法堂:不完全国际化&本地化手册 之 理論篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  5. JS魔法堂:不完全国际化&本地化手册 之 实战篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  6. JS魔法堂:判断节点位置关系

    一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

  7. JS魔法堂:属性、特性,傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  8. JS魔法堂:那些困扰你的DOM集合类型

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

  9. JS魔法堂:doctype我们应该了解的基础知识

    一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...

  10. JS魔法堂:浏览器模式和文档模式怎么玩?

    一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...

随机推荐

  1. System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用”的错误

    还原sql2008数据库时遇到"System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用"的错误,在网上搜索解决方案如下: 1.在" ...

  2. ASP.NET 5 入门(1) - 建立和开发ASP.NET 5 项目

    ASP.NET入门(1) - 建立和开发ASP.NET 5 项目 ASP.NET 5 理解和入门 使用自定义配置文件 建立项目 首先,目前只有VS 2015支持开发最新的ASP.NET 5 程序,所以 ...

  3. javascript 设计模式-----观察者模式

    观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...

  4. 动态绑定HTML

    在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写) ...

  5. Python--过滤Mysql慢日志

    ##================================================================## 先来个笑话: 刚交的女朋友让我去他家玩,我觉得空手不好,于是告 ...

  6. redis系列-redis的连接

    Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map), 列表(list ...

  7. Redis的使用模式之计数器模式实例

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/123.html?1455853785 Redis 是目前 NoSQL 领域 ...

  8. Redis教程(十四):内存优化介绍

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/142.html 一.特殊编码: 自从Redis 2.2之后,很多数据类型都 ...

  9. 爱上MVC~为Html.EditorForModel自定义模版

    回到目录 挺有意思的一件事 对于MVC视图渲染来说,大家应该不会陌生,但对于模型的渲染,不知道是否听说过,主要是说Model通过它属性的相关特性(DataType,UIHint)来将它们自动渲染到Vi ...

  10. thinkphp里的session、cookie方法

    thinkphp里,对于session和cookie的操作,不管是存值.获取.删除,均只有一个方法.现分享出来,供大家参考参考. /** * session管理函数 * @param string|a ...