Cloning and deletion of DOM nodes

The beginning of the helpless

With regard to DOM node operations, it is easiest to operate on a standard API only. But in reality, where there is so easy to solve the problem, in fact, not only the node cloning and deletion, the addition of nodes is also the case, and add nodes need to consider more, here is not detailed explanation, only the approximate process.

The problem is so many, mainly in the browser itself implementation, especially legacy IE on the-ie6,7,8. In the API implementation of the Add node, ie made a contribution, that is, insertadjacenthtml function is included in the HTML5 specification, this function in the previous article explained in detail and implemented, do not mention. Since then, IE's behavior is not worth advocating, because our compatibility is mainly aimed at legacy ie.

Cloning a node, the canonical API is CloneNode (Boolean), and Boolean is true when deep cloning is performed. However, legacy IE has a strange bug, that is, the cloned copy, but still contains related event handlers and user-defined properties, and modify the deletion of these properties or functions, will affect the properties of the source node ... It really makes people have no words. The solution is to find a way to reconstruct a DOM node by getting a copy of the HTML string, so that a copy of the string deserialization will not contain the property or event handler for the extra action in JS.

The deletion of nodes should not be a problem, but legacy IE only use Removenode will have a memory leak problem, the deleted node has some memory and will not be recycled, if you run the program for a long time, there may be a risk of memory exhaustion, only to close the page can reclaim the memory. However, the outerHTML property can be used to make a fuss, he can delete the occupied memory more effectively, but it is important to note that this method still does not completely free up the occupied memory, but the overall recovery of memory is greater than the Removenode method.

Realize

          /** * Older versions of IE (IE678) copy element nodes, which are copied to the * copy along with the event handler and user-defined properties, and modify the event handler and custom properties of the copy to affect the source node. */Clone=function(){                //if it's a bug under IE678                varEl,c; if(Screen.support.cloneNodeWithHandler) {El= This[0].clonenode (true); C= Doc.createelement ("div");                    C.appendchild (EL); returnS.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 This will cause a memory leak, after the element node is deleted                        //Some of the memory is still not recyclable. Can be recycled through outerhtml, but                        //It is also necessary to know that this method does not reclaim all the memory used by the node, but                        //at least the recovery is more than removechild.                         if(typeofEl.outerhtml!==undefined) {el.outerhtml= "";                }                    }                }); return  This; }

The above code is part of my private library implementation, please note that there are errors.

Cloning and deletion of DOM nodes