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方法
二、拷贝
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 |
当前文档的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独有的。
JS魔法堂:元素克隆、剪切技术研究的更多相关文章
- JS魔法堂:LINK元素深入详解
一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...
- JS魔法堂:IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- JS魔法堂:jsDeferred源码剖析
一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...
- JS魔法堂:不完全国际化&本地化手册 之 理論篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- JS魔法堂:不完全国际化&本地化手册 之 实战篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- JS魔法堂:判断节点位置关系
一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...
- JS魔法堂:属性、特性,傻傻分不清楚
一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
- JS魔法堂:那些困扰你的DOM集合类型
一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...
- JS魔法堂:doctype我们应该了解的基础知识
一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...
- JS魔法堂:浏览器模式和文档模式怎么玩?
一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...
随机推荐
- System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用”的错误
还原sql2008数据库时遇到"System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用"的错误,在网上搜索解决方案如下: 1.在" ...
- ASP.NET 5 入门(1) - 建立和开发ASP.NET 5 项目
ASP.NET入门(1) - 建立和开发ASP.NET 5 项目 ASP.NET 5 理解和入门 使用自定义配置文件 建立项目 首先,目前只有VS 2015支持开发最新的ASP.NET 5 程序,所以 ...
- javascript 设计模式-----观察者模式
观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...
- 动态绑定HTML
在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写) ...
- Python--过滤Mysql慢日志
##================================================================## 先来个笑话: 刚交的女朋友让我去他家玩,我觉得空手不好,于是告 ...
- redis系列-redis的连接
Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map), 列表(list ...
- Redis的使用模式之计数器模式实例
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/123.html?1455853785 Redis 是目前 NoSQL 领域 ...
- Redis教程(十四):内存优化介绍
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/142.html 一.特殊编码: 自从Redis 2.2之后,很多数据类型都 ...
- 爱上MVC~为Html.EditorForModel自定义模版
回到目录 挺有意思的一件事 对于MVC视图渲染来说,大家应该不会陌生,但对于模型的渲染,不知道是否听说过,主要是说Model通过它属性的相关特性(DataType,UIHint)来将它们自动渲染到Vi ...
- thinkphp里的session、cookie方法
thinkphp里,对于session和cookie的操作,不管是存值.获取.删除,均只有一个方法.现分享出来,供大家参考参考. /** * session管理函数 * @param string|a ...