JQuery-1.9.1 source code analysis series (11) DOM operation continued clone node _ jquery

Source: Internet
Author: User
This article mainly introduces the jQuery-1.9.1 source code analysis series (11) DOM operation continued clone node related information, need friends can refer to under what circumstances to use to clone nodes?

We know that when you directly use a node during DOM operations, the node changes with the operation. For example, if you use methods such as. after/. before/. append on a node, the node is added to a new place and removed from the original location. Sometimes you need to keep the nodes at the original location. You only need to add a copy to the corresponding location. In this case, cloning is applicable.

JQuery. fn. clone clones a copy of the current Matching Element Set and returns it as a jQuery object.

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

JQueyr. fn. clone: function (withDataAndEvents, deepDataAndEvents) parameter description

A. The underlying implementation steps of the clone function are as follows (jQuery. clone)

Step 1: Clone the DOM node first. Clone a node that supports the correct settings (elem is supported. cloneNode (true) is used directly for DOM nodes with no errors. Otherwise, a self-built node stores the cloned data and obtains the node.

If (jQuery.support.html 5 Clone | jQuery. isXMLDoc (elem) |! Rnoshimcache. test ("<" + elem. nodeName + ">") {clone = elem. cloneNode (true); // IE <= 8 cannot clone a separated or unknown node. // create an identical node directly, then get} else {// fragmentDiv is the global variable fragmentDiv. innerHTML = elem. outerHTML; fragmentDiv. removeChild (clone = fragmentDiv. firstChild );}

Step 2: in IE browser, you need to use fixCloneNodeIssues (node, destElements [I]); To fix IE cloning one by one. All the IE cloning solutions are included in fixCloneNodeIssues, which is analyzed in the next section. Click here for more information about jQuery. support.

// Modify if ((! JQuery. support. noCloneEvent |! JQuery. support. noCloneChecked) & (elem. nodeType = 1 | elem. nodeType = 11 )&&! JQuery. isXMLDoc (elem) {// The reason we don't use Sizzle here is: http://jsperf.com/getall-vs-sizzle/2 destElements = getAll (clone); srcElements = getAll (elem ); // fixed all IE Cloning Issues for (I = 0; (node = srcElements [I])! = Null; ++ I) {// Ensure that the destination node is not null; Fixes #9587 if (destElements [I]) {fixCloneNodeIssues (node, destElements [I]) ;}}

Step 3: Clone the cached data (including normal data and binding events.

// Clone the 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 events 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 cloned node events = oldData. events; if (events) {// ensure that the event object of the cloned node is clean and that no events added later do not duplicate the 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]) ;}}// visualize the cloned data if (curData. data) {curData. data = jQuery. extend ({}, curData. data );}}

Step 4: Protect the script computing history (globally mark the scripts code segment that has been executed), reclaim the memory, and return the cloned node.

destElements = getAll( clone, "script" );if ( destElements.length > 0 ) {  setGlobalEval( destElements, !inPage && getAll( elem, "script" ) );}destElements = srcElements = node = null;return clone;

B. Summary of IE Cloning Issues fixCloneNodeIssues (src, dest)

Src is the original node, and dest is the clone node of src.

IE cloning (IE8 +)

1. The IE6-8 clones events when using cloneNode (these events are bound through attachEvent ). To ensure uniformity, you need to clear clone events and prepare for subsequent unified clone events.

// The IE6-8 enters this branch when using cloneNode replication events (these events are bound through attachEvent) // clears the original event to 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-When cloning the script tag script, the cloned content will be blank. We need to assign a new value to him and ensure that he does not execute the script content.

// When cloning the script in IE, the content is blank and you try to execute the new text if (nodeName = "script" & dest. text! = Src. text) {disableScript (dest). text = src. text; restoreScript (dest );}

3. The IE6-10 cannot clone the child node of the object element obtained using the classid. In IE10, if the parent node is null, NoModificationAllowedError is thrown. You must use the outerHTML and innerHTML of the original node to re-assign values.

// The IE6-10 cannot clone the child node of the object element obtained using the classid. // In IE10, if the parent node is null, The NoModificationAllowedError exception else if (nodeName = "object") {if (dest. parentNode) {dest. outerHTML = src. outerHTML;} // For IE9, this branch is inevitable. // The above outerHTML policy is inadequate when cloning object elements in IE9. // If src has innerHTML but no cloned node exists, // copy src. innerHTML to dest. innerHTML #10324 if (jQuery.support.html 5 Clone & (src. innerHTML &&! JQuery. trim (dest. innerHTML) {dest. innerHTML = src. innerHTML ;}}

4. The IE6-8 cannot clone the selected status of a checkbox or radio button. You need to set it manually.

// Manipulation_rcheckableType =/^ (? : Checkbox | radio) $/I else if (nodeName = "input" & manipulation_rcheckableType.test (src. type) {// The IE6-8 cannot stick to the selected status of a cloned checkbox or radio button // worse, if the defaultChecked value is not set, the IE6-7 cannot give the clone element the appearance of the selected state dest. defaultChecked = dest. checked = src. checked ;...}

5. When the select label is cloned, The IE6-8 cannot return the select default selected status correctly. You need to set it manually.

// When cloning options, the IE6-8 cannot return the select default selected else if (nodeName = "option") {dest. defaultSelected = dest. selected = src. defaultSelected ;}

6. When cloning other types of input and textare tags, The IE6-8 cannot correctly set defaultValue to the correct value. You need to set it manually.

// When cloning another type of input tag, the IE6-8 cannot correctly set defaultValue to the correct value else if (nodeName = "input" | nodeName = "textarea ") {dest. defaultValue = src. defaultValue ;}

Which uses the disableScript function. The purpose of a function is to change the type of the script, so that it is not executed as a script after being assigned a value to the script. This method can be used for reference.

// Replace/Save the type attribute function disableScript (elem) {var attr = elem for safe DOM operations. getAttributeNode ("type"); elem. type = (attr & attr. specified) + "/" + elem. type; return elem ;}

The above content is small make up to introduce you to the jQuery-1.9.1 source code analysis series (11) DOM operation continued clone nodes all described, I hope you like.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.