DOM 节点的克隆与删除
无奈的开头
关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了。但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情况更多,这里不详细讲解,只说明大概过程。
问题那么多,主要出现在浏览器自身实现上,其中尤属legacy IE上—IE6,7,8. 在添加节点的API实现上,IE做了一个贡献,那就是insertAdjacentHTML函数被纳入HTML5规范上,这个函数在之前的文章中详细讲解并实现过,不提。此后,IE的行为却不值得提倡,因为我们的兼容性主要针对的就是legacy IE。
克隆节点,规范的API是cloneNode(boolean),boolean为true时进行深克隆。但是legacy IE却有一个奇怪的bug,那就是通过该方法克隆的副本,却仍含有相关的事件处理函数和用户自定义属性,而且修改删除这些属性或者函数,会影响到源节点的属性
。。。着实让人无语。解决方案另辟蹊径,即可以通过获取副本的HTML字符串,重新构造一个DOM节点,这样根据字符串反系列化的副本就不会包含在js中额外操作的属性或者事件处理程序。
删除节点理应没有什么问题,但是legacy IE下仅仅使用removeNode会出现内存泄露问题,被删除的节点有部分内存并不会被回收,如果长时间运行该程序,则可能会出现内存耗尽的危险,只有关闭页面才可能回收这些内存。但是可以利用outerHTML属性做文章,他可以更有效的删除占用的内存,但是需要注意的是这种方法仍然不会完全释放占用的内存,但是总体回收的内存大于removeNode方法。
实现
/**
* 旧版IE(IE678)拷贝元素节点,会连同事件处理函数和用户自定义属性一同拷贝给
* 副本,并且修改副本的事件处理函数和自定义属性会影响到源节点。
*/
clone = function(){
// 如果是IE678下的bug
var el,c;
if(Screen.support.cloneNodeWithHandler){
el = this[].cloneNode(true);
c = doc.createElement("div");
c.appendChild(el);
return S.DomParser(c.innerHTML).firstChild;
}else{
return this.cloneNode(true);
}
}
remove = function(){
this.each(function(el){
if(el.nodeType && el.nodeType == ){
S._unData(el);
if(el.parentNode){
el.parentNode.removeChild(el);
}
// IE 678下这样会造成内存泄露,元素节点删除之后
// 仍有部分内存不能回收。可通过outerHTML回收,但是
// 需要知道的是这种方法也不能回收节点使用的全部内存,但是
// 最起码回收的比removeChild多。
if(typeof el.outerHTML !== undefined){
el.outerHTML = "";
}
}
});
return this;
}上述代码是本人私人库实现的一部分,有错误之处还请指出。
DOM 节点的克隆与删除的更多相关文章
- .clone事件当你克隆的时候,DOM节点是克隆出来了,但是克隆出来的节点不能运行时事件 ...
解决办法如下在clone()里面加个参数true,即可完成事件的植入.即:.clone(true).clone( [ withDataAndEvents ], [ deepWithDataAndEve ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- 节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点
什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- jQuery克隆DOM节点
jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- jQuery删除DOM节点
jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
随机推荐
- 解决 adb.exe 停止工作小续
继adb 停止工作的问题之后,又碰见了adb 停止工作的问题. 在使用adb install app.apk 之后给出错误信息如下: * daemon not running. starting it ...
- ubuntu环境下vmware取消自动启动服务
概述其实vmware这个服务取不取消,影响不大,主要是我有强迫症,在不用虚拟机的时候,看着vmware占着进程真心不爽,想要解决这个问题,在用虚拟机的时候启动服务,反之,则停.接下来,我说一下实现吧. ...
- PHP基础面试题
1.PHP的意思? 答:PHP是一个基于服务端来创建动态网站的脚本语言,您可以用PHP和HTML生成网站主页 2.谈谈asp,php,jsp的优缺点? 答:ASP全名Active Server Pag ...
- call和bind改变的上下文环境
这周自我学习的时间很宽裕.正巧一直对call和apply不甚理解(虽然bind还经常用到,仅仅是知道这么用有这个效果= =,而不知为何有这个效果),下午就自己写写demo,帮助自己理解. functi ...
- maven内部运行原理解析
maven至今还是Java编程语言构建的事实标准,大部分项目还在使用maven来进行构建,因此了解maven内部运行的原理对定位和分析问题还是很有裨益的.本篇文章主要介绍一些maven内部运行过程中的 ...
- sqL编程篇(三) 游标与存储过程
sql编程2 游标与存储过程 sql编程中的游标的使用:提供的一种对查询的结果集进行逐行处理的一种方式不用游标的处理解决方式:逐行修改工资update salar set 工资=‘新工资’ where ...
- ios培训机构排名
移动互联网的时代,智能手机的作用已经无所不在,APP在人们的生活中也起到了非常重要的作用,iOS开发行业同样受到越来越多人的关注,更多的人选择参加iOS培训机构来加入这个行列,而如何选择一个真正可以学 ...
- ex3-数字和数字计算
代码: print("I will now count my chickens:") print("hens", 25+30/6)print("Roo ...
- 解读ASP.NET 5 & MVC6系列(4):核心技术与环境配置
asp.net 5是下一代的asp.net,该版本进行了全部重写以适用于跨平台,新新版本中,微软引入了如下工具与命令:DNVM.DNX.DNU. DNVM(.NET Version Manager): ...
- 安卓动态调试七种武器之离别钩 – Hooking(上)
安卓动态调试七种武器之离别钩 – Hooking(上) 作者:蒸米@阿里聚安全 0x00 序 随着移动安全越来越火,各种调试工具也都层出不穷,但因为环境和需求的不同,并没有工具是万能的.另外工具是死的 ...