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开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...
随机推荐
- Apache Lucene 4.5 发布,Java 搜索引擎
Apache Lucene 4.5 发布了,该版本提供基于磁盘的文档值以及改进了过滤器的缓存.Lucene 4.5 的文档请看这里. Lucene 是apache软件基金会一个开放源代码的全文检索引擎 ...
- centos git 服务器搭建
1.安装git sudo yum -y install git 2.创建用户与授权 # 找到 git_shell whereis git_shell /usr/bin/git-shell # 创建 g ...
- [后端人员耍前端系列]KnockoutJs篇:快速掌握KnockoutJs
一.引言 之前这个系列文章已经介绍Bootstrap.由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的.所以我又重新开始写这个系列.今天就让我们来看 ...
- 自动升级系统OAUS的设计与实现(续) (附最新源码)
(最新OAUS版本请参见:自动升级系统的设计与实现(续2) -- 增加断点续传功能) 一.缘起 自从 自动升级系统的设计与实现(源码) 发布以后,收到了很多使用者的反馈,其中最多的要求就是希望OAUS ...
- objective-c(内存管理)
本文主要记录objective-c 内存管理的知识点: 1.objective-c的对象都是分配内存在堆上,与C的mallock和C++的new类似,只有int等系统变量分配内存在栈上: 2.obje ...
- Java多线程17:中断机制
概述 之前讲解Thread类中方法的时候,interrupt().interrupted().isInterrupted()三个方法没有讲得很清楚,只是提了一下.现在把这三个方法同一放到这里来讲,因为 ...
- 原创教程:《metasploit新手指南》介绍及下载
原创教程:<metasploit新手指南>介绍及下载 1.1 作者简介 这份教程并不是“玄魂工作室”原创,但是我还是要力推给大家.相比那些一连几年都在问“我怎么才能入门”的人而言,我们更欣 ...
- hadoop rpc基础
第一部分: hadoop rpc基础 RPC,远程程序调用,分布式计算中C/S模型的一个应用实例. 同其他RPC框架一样,Hadoop分为四个部分: 序列化层:支持多种框架实现序列化与反序列化 函数调 ...
- 从3D Touch 看 原生快速开发
全新的按压方式苹果继续为我们带来革命性的交互:Peek和Pop,Peek 和 Pop 让你能够预览所有类型的内容,甚至可对内容进行操作,却不必真的打开它们.例如,轻按屏幕,可用 Peek 预览收件箱中 ...
- [.net 面向对象程序设计进阶] (9) 序列化(Serialization) (一) 二进制流序列化
[.net 面向对象程序设计进阶] (9) 序列化(Serialization) (一) 二进制流序列化 本节导读: 在.NET编程中,经常面向对象处理完以后要转换成另一种格式传输或存储,这种将对 ...