JQuery3.0 domManip analysis, jquery3.0dommanip

JQuery3.0 domManip analysis, jquery3.0dommanip

DomManip has been a function for a long time. It has existed since jQuery 1.0 and has been to the latest jQuery version. It is an old-level tool function.

 

The main function of domManip is to insert and replace DOM. A total of five function services are available:

• Append)
• Prepend)
• Before)
• Insert after external)
• ReplaceWith (domMainp is not used in versions earlier than 1.9.x)

 

An each generates five other functions: appendTo, prependTo, insertBefore, insertAfter, and replaceAll.

jQuery.each( {appendTo: "append",prependTo: "prepend",insertBefore: "before",insertAfter: "after",replaceAll: "replaceWith"}, function( name, original ) {jQuery.fn[ name ] = function( selector ) {var elems,ret = [],insert = jQuery( selector ),last = insert.length - 1,i = 0;for ( ; i <= last; i++ ) {elems = i === last ? this : this.clone( true );jQuery( insert[ i ] )[ original ]( elems );// Support: Android <=4.0 only, PhantomJS 1 only// .get() because push.apply(_, arraylike) throws on ancient WebKitpush.apply( ret, elems.get() );}return this.pushStack( ret );};} );

 

 

Internal call

 

Source code

append: function() {return domManip( this, arguments, function( elem ) {if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {var target = manipulationTarget( this, elem );target.appendChild( elem );}} );},prepend: function() {return domManip( this, arguments, function( elem ) {if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {var target = manipulationTarget( this, elem );target.insertBefore( elem, target.firstChild );}} );},before: function() {return domManip( this, arguments, function( elem ) {if ( this.parentNode ) {this.parentNode.insertBefore( elem, this );}} );},after: function() {return domManip( this, arguments, function( elem ) {if ( this.parentNode ) {this.parentNode.insertBefore( elem, this.nextSibling );}} );},replaceWith: function() {var ignored = [];// Make the changes, replacing each non-ignored context element with the new contentreturn domManip( this, arguments, function( elem ) {var parent = this.parentNode;if ( jQuery.inArray( this, ignored ) < 0 ) {jQuery.cleanData( getAll( this ) );if ( parent ) {parent.replaceChild( elem, this );}}// Force callback invocation}, ignored );}

　　

Implementation of domManip

The main function of domManip is to add DOM elements. Because of the different locations, four public functions are provided: append, prepend, before, and after. In addition, there is a replaceWith. Simply put, domManip does two things.

 

An important function of domManip dependency is buildFragment, which improves DOM insertion performance.

 

The domManip performs special processing on script node elements.

In addition, datatev. access (node, "globalEval") indicates that if the script has been executed, it will not be executed again. Or a globalEval: true flag will be set after execution.

DomManip depends on buildFragment, restoreScript, disableScript, jQuery. _ evalUrl, and DOMEval, while restoreScript and jQuery. _ evalUrl are only used by domManip.

// Replace/restore the type attribute of script elements for safe DOM manipulationfunction disableScript( elem ) {elem.type = ( elem.getAttribute( "type" ) !== null ) + "/" + elem.type;return elem;}function restoreScript( elem ) {var match = rscriptTypeMasked.exec( elem.type );if ( match ) {elem.type = match[ 1 ];} else {elem.removeAttribute( "type" );}return elem;}jQuery._evalUrl = function( url ) {return jQuery.ajax( {url: url,// Make this explicit, since user can override this through ajaxSetup (#11264)type: "GET",dataType: "script",cache: true,async: false,global: false,"throws": true} );};

　　

DomManip has evolved from various versions