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独有的。
- Python自学笔记——多线程微信文章爬取
- 习近平要求加快这项技术发展 与你关系很密切!
- 趴比库获数百万元融资 域名pabiku.com给力十足
- 联袂腾讯 “互联网+税务”创新模式在蒙启动
- 学医11年,终将被机器取代
- 大数据揭示:女性比男性更关注医改 建档等是热门话题
- 腾讯人工智能实验室AI Lab主任张潼博士前沿对话:AI如何助力营销?
- 当前所有源码链接
- Python入门基础连载(4)控制流
- 济西站构建大数据运营网络,打造智能化列车加工厂
- 五位数终端收购的域名dongxiao.cn已启用
- 全球互联网发展进入“拐点”——展望下一代互联网
- 2 分钟论文:语音生成表情包背后的技术原理
- 享学课堂谈-Python程序员的常见错误
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 实战django(二)--登录实现记住我
- org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.gong.mybatis.da
- 【python-leetcode378-二分查找】有序矩阵中的第k小元素
- 使用cookie来记录用户登录次数,为何次数不更新
- (二)golang--windows下vscode的安装以及go环境的配置
- mybatis文件映射之使用#取值时的一些规则
- 【论文笔记】Improved Residual Networks for Image and Video Recognition(ResNet新变体:IResNet)
- SQL语句在MYSQL中的运行过程和各个组件的介绍
- (五)golang--常用的一些玩意
- 关于MYSQL 的日志系统
- (六)golang--变量
- springmvc之文件上传
- (七)golang--变量之基本数据类型(看这篇就够了)
- Mybatis学习笔记(五)Mybatis中已经显示数据已修改但数据库中记录未更新问题
- 【自然语言处理(一)】相关基础技能