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[0].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 == 1){
                        S._unData(el);
                        if(el.parentNode){
                            el.parentNode.removeChild(el);
                        }
                        // IE 678下这样会造成内存泄露,元素节点删除之后
                        // 仍有部分内存不能回收。可通过outerHTML回收,但是
                        // 需要知道的是这种方法也不能回收节点使用的全部内存,但是
                        // 最起码回收的比removeChild多。
                        if(typeof el.outerHTML !== undefined){
                            el.outerHTML = "";
                        }
                    }
                });
                return this;
            }

上述代码是本人私人库实现的一部分,有错误之处还请指出。

时间: 2024-08-05 23:12:43

DOM 节点的克隆与删除的相关文章

08.16号 dom 节点的创建 和删除DOM表单与非表单取值的方法 和操作属性与操作样式

<html> <head> <meta charset="utf-8"> <title>Dom操作</title> <script type="text/javascript" src="08.16/08.16.js"></script> </head> <body> <!--dom节点添加 删除 ; createElemen 创建一

.clone事件当你克隆的时候,DOM节点是克隆出来了,但是克隆出来的节点不能运行时事件 ...

解决办法如下在clone()里面加个参数true,即可完成事件的植入.即:.clone(true).clone( [ withDataAndEvents ], [ deepWithDataAndEvents ] )withDataAndEvents一个Boolean值(true 或者 false)指示事件处理函数是否会被复制.对已jQuery 1.4,元素数据也会被复制. 默认值是 false.*对于1.5.0的默认值是true .这将在1.5.1以上改回false.deepWithDataAn

JavaScript操作DOM节点

DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能.

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

节点操作-创建并添加&amp;删除节点&amp;替换&amp;克隆节点

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM增删改查</title> <style type="text/css"> div{ border:#306 1px solid; width:200px; height:30px; margin:10px; } #div

使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test</div><script language="javascript">alert(document.getElementById("myid").innerHTML);</script></body></html&

DOM节点的删除(jQuery)

1DOM节点删除之empty()的基本用法 要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="hello"><p>慕课网&l

父兄子节点的获取及子节点的添加、删除、克隆操作

第一.父兄子节点的获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> </

jQuery修炼心得-DOM节点的删除

要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题. 1.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中,通过empty移除了当前div元素下的所有p元素 但是本身id=