jQuery-1.9.1 Source Analysis Series (11) DOM operation continued clone node _jquery

Under what circumstances is a clone node used?

We know that if you use the node directly during the DOM operation, the node will change with the operation. For example, the node is added to the new place, and the nodes in the original position are removed when using the. After/.before/.append method. Sometimes it is necessary to retain the original location of the node, just need a copy to add to the corresponding location, this time the clone has a use scene.

JQuery.fn.clone clones a copy of the current matching element collection and returns in the form of a jquery object.

You can also specify whether to copy additional data (the data () function) and binding events for these matching elements (even their child elements).

JQueyr.fn.clone:function (withdataandevents, deepdataandevents) parameter description

A. The underlying implementation steps of the cloning function are broken down as follows (Jquery.clone)

The first step is to clone the DOM node first. Use CloneNode (TRUE) directly for DOM nodes that support the correct node clones (that is, support elem.clonenode and ensure cloning is correct), otherwise a node is built to hold the cloned data and then get the node.

if (JQuery.support.html5Clone | | jquery.isxmldoc (elem) | |!rnoshimcache.test ("<" + Elem.nodename + ">")) {
  C Lone = Elem.clonenode (true);
Ie<=8 could not properly clone a detached, unknown node
//Create a new identical node directly, then get
} else {
//fragmentdiv is a global variable
  fragmentdiv.innerhtml = elem.outerhtml;
  Fragmentdiv.removechild (clone = Fragmentdiv.firstchild);

The second step, if it is in IE browser, you need to pass fixclonenodeissues (node, destelements[i]), to amend the IE cloning problem. IE cloning solution is all included in the Fixclonenodeissues, the next section is analyzed in detail. Inside the Jquery.support content click here to see more

Modify
if (!jquery.support.nocloneevent | |!jquery.support.noclonechecked) && for IE cloning problem (
  Elem.nodetype = = 1 | | Elem.nodetype = = &&!jquery.isxmldoc (elem)) {
  //Here's why we don't use sizzle: http://jsperf.com/ GETALL-VS-SIZZLE/2
  destelements = GetAll (clone);
  srcelements = GetAll (elem);
  Fix all IE cloning questions for
  (i = 0; (node = srcelements[i])!= null; ++i) {
    //Ensure that the destination node was not null; Fixes #9587
    if (Destelements[i]) {
      fixclonenodeissues (node, destelements[i]);
    }
  }

In the third step, if you want to clone cached data (including normal data and binding events), clone it.

The Clone bound event
if (dataandevents) {
  if (deepdataandevents) {
    srcelements = srcelements | | getAll (elem);
    destelements = Destelements | | GetAll (clone);
    for (i = 0; (node = srcelements[i])!= null; i++) {
      clonecopyevent (node, destelements[i]);
    }
  } else {
    clonecopyevent (Elem, clone);
}}

Note: The Clonecopyevent function saves the data of the original node to the Clone node, and then binds the event of the original node to the new clone node

function clonecopyevent (src, dest) {
    if (dest.nodetype!== 1 | |!jquery.hasdata (SRC)) {return
      ;
    }
    var type, I, L,
    olddata = Jquery._data (src),
    curdata = Jquery._data (dest, OldData),//dest is the node of the clone pair
    events = olddata.events;
    if (events) {
      //Ensure that the event object of the cloned node is clean, ensure that no subsequent events are added without repeating
      delete curdata.handle;
      Curdata.events = {};
      For [type in events] {for
        (i = 0, L = events[type].length i < L; i++) {
          jQuery.event.add (dest, type, events[type] [i])
        ;
    }} Make the cloned data object the
    if (curdata.data) {
      Curdata.data = Jquery.extend ({}, Curdata.data);
    }
  

The fourth step is to protect the script computing history (globally marked scripts code snippet has been executed) and reclaim the memory to return the clone node.

Destelements = GetAll (clone, "script");
if (Destelements.length > 0) {
  setglobaleval (destelements,!inpage && getAll (elem, "script"));
destelements = srcelements = node = null;
return clone;

b.ie Cloning Problem Rollup fixclonenodeissues (src,dest)

SRC is the original node and dest is the clone node of SRC.

IE cloning problem list (ie8+)

1.ie6-8 when using CloneNode will clone events (these events bind through attachevent). To ensure uniformity, you need to clear the cloned events and prepare for subsequent unified cloning events.

  Ie6-8 Enter the branch//clear the original event when using CloneNode Replication events (these event bindings pass attachevent)
  , and prepare for the clone event
  if (!jquery.support.nocloneevent && dest[Jquery.expando]) {
    data = Jquery._data (dest);
    For (e in data.events) {
      jquery.removeevent (dest, E, data.handle);
    }
    Dest.removeattribute (Jquery.expando);
  }

2.ie8-the cloned script tag script will result in a blank clone. We need to reassign him and make sure he doesn't execute the script content.

IE clones the script with a blank content and attempts to execute the new set of text
  if (nodename = = "Script" && dest.text!== src.text) {
    disablescript (dest). Text = Src.text;
    Restorescript (dest);
    }

3.IE6-10 cannot clone child nodes of an object element that is used by ClassID. IE10, a Nomodificationallowederror exception is thrown if the parent node is null. You need to use the outerhtml and innerHTML of the original node to reassign the value.

 IE6-10 cannot clone child nodes of an object element that is used by ClassID.
  //ie10, if the parent node is NULL, it throws the Nomodificationallowederror exception
  else if (nodename = = "Object") {
    if ( Dest.parentnode) {
      dest.outerhtml = src.outerhtml;
    }
    For IE9, this branch is unavoidable. The
    above outerhtml strategy is not sufficient for cloning object elements in//IE9.
    //If SRC has a innerHTML and the clone node is not,
    //copy src.innerhtml to dest.innerhtml #10324
    if ( JQuery.support.html5Clone && (src.innerhtml &&!jquery.trim (dest.innerhtml)) {
      dest.innerhtml = src.innerhtml;
    }
  }

4.ie6-8 cannot clone a check box or a radio button's selected state. Active settings are required.

 Manipulation_rcheckabletype =/^ (?: Checkbox|radio) $/i
  else if (nodename = = "Input" && Manipulation_ Rcheckabletype.test (Src.type)) {
    //ie6-8 cannot adhere to the selected state of a cloned checkbox or radio button
    //Worse, if the defaultchecked value is not set, The ie6-7 cannot give the cloned element the appearance of the selected state
    dest.defaultchecked = dest.checked = src.checked;
    ...
  }

5. When cloning a select label, ie6-8 cannot correctly return the Select default check state. Active settings are required.

When cloning an option, ie6-8 cannot correctly return the Select default selected state
   else if (nodename = = "option") {
    dest.defaultselected = dest.selected = Src.d efaultselected;
   }

6. When cloning other types of input and textare tags, ie6-8 does not correctly set DefaultValue as the correct value. Active settings are required.

  When cloning other types of input labels, ie6-8 does not correctly set DefaultValue to the correct value
  else if (nodename = = "Input" | | nodename = = "textarea") {
    D Est.defaultvalue = Src.defaultvalue;
  }

It uses the Disablescript function. The purpose of the function is to change the type of the script to ensure that it is not executed as a script after assigning a value to the script. This way we can learn from

Replace/Save script node element type attribute
function Disablescript (elem) {
  var attr = elem.getattributenode (' type ') for security DOM operations;
  Elem.type = (attr && attr.specified) + "/" + Elem.type;
  return elem;
}

The above content is small to introduce to you about the jQuery-1.9.1 Source Analysis Series (11) Dom operation of the cloning node of all the narration, I hope you like.