jquery core Functions Dommanip detailed

What's Dommanip?

Dom is the DOM element, and Manip is the abbreviation for manipulate, which is connected to the meaning of DOM operations.

. Dommanip () is the core function of the jquery DOM operation

The parameter correction support is done on the encapsulated node operation, and the corresponding processing is called

Append, Prepend, before, after, ReplaceWith

Appendto, Prependto, InsertBefore, InsertAfter, ReplaceAll

The operation of the node has several key details

• To ensure that the final operation is always a DOM element, the browser's final API only knows a few interfaces, so if the pass is a string or something else, of course, you need to convert
• For a large number of operations on the node, we definitely need to introduce a document fragment to do optimization, which is essential

We know that the interface of jquery is to support multiple parameter passes, then a filter mediation is needed to handle various parameter types.

This task is given to Dommanip, in addition to the DOMMANIP in the design process:

1: Parsing parameters, strings, Functions, objects
2: Introduce document fragmentation for large data
3: If the parameter contains script processing

There are a lot of details to be asked:

1:ie below innerHTML ignores the no scope element, No-scope Element (Script,link,style,meta,noscript), and so on, so this class is created by innerHTML with a prefix

2:innerhtml under IE will be trimleft operation of strings, remove whitespace

3:innerhtml will not execute the script code, except if the support defer

4: Many tags can not be used as a DIV child elements, TD, TR, TBODY, etc.

5:jquery is a collection object, document fragmentation and event replication issues

Code that does not execute scripts for innerHTML, if the explanation is supported except for defer:

div.innerhtml = "<script>alert (aseoe) </srcript>" This code will not execute

Exceptions: Several conditions are met before IE9

1:script Set defer properties

The 2:script element must be located after the scoped element because the script is considered to be not scoped (not visible in the page)

In other words, this setting

div.innerhtml = "<div><script defer>alert (1) </srcript></div>"  can be executed

jquery has a Dommanip method of internal adoption, which has dealt with all aspects of the problem.

Combining the above series of questions, jquery introduces the Dommanip method

The reason is clear, let's see how jquery handles the tbody problem, and jquery is compatible with IE 6 browsers. Append, prepend, before, and after are functions that manipulate DOM elements, and if the object being inserted is a table, add the tbody tag to the table.

So Dommanip is mainly dealing with this problem, he also handles the order of inserting elements, etc.

In the structure first with extend in the prototype expansion of a pile of methods, in fact, each of the implementation is very simple, the focus is to understand the use of Dommanip. Can focus on the implementation of two methods to look at, do not have to look at each.

And then there's the appendto and append sort of thing, which is pretty much the same, because it's almost done, so it's all together.

JQuery.fn.extend ({ 
     text:function () {}, 
     append:function () {}, 
     prepend:function () {}, 
     before: function () {}, After:function () {}, Clone:function () {}, Html:function () {},   
     replacewith:function ( ) {},  
     dommanip:function () {},  
})

Where Append method:

Append:function () {return
    this.dommanip (arguments, function (elem) {
        if (This.nodetype = 1  This.nodetype = =  This.nodetype = = 9 {
            var target = Manipulationtarget (this, elem);
            Target.appendchild (Elem);
        }
    );

1: The function called the Dommanip function, the argument passed in the first is arguments, which we all know arguments is a function parameter object, is a class array object. Here arguments may be an array containing DOM elements, or an HTML string

2: The second parameter is a callback function, Target.appendchild (elem); see this code is very clear, in the callback function separate the processing method, through Dommanip abstract public processing, the rest of the prepend, before, After the interface is similar to the processing

var div = document.queryselectorall (' div ') [0]; div.innerhtml = "<script>alert (' net of resources ')"; So JavaScript does not execute. In other words, you can insert a script tag, but do not execute the script code, but under the early IE, if you set the defer is another. If we switch to jquery's Appned method: The processing code is executed, and the jquery approach is not as simple as dealing with $ (' div '). Append ("<script>alert") simply, If. HTML () Incoming string has <script> <object> <embedt> <optiont> <style> One of the. html () method does not use the innerHTML operation, but instead uses jquery.append () to process the string into the. Append ()->. Dommanip ()-> buildfragment ()->clean () process Clean () in the dynamic generation of a Div, the Div innerhtml set as the passed-in string, and then use getElementsByTagName (' script ') to capture all the script to save the clean () Execution completed back to Dommanip (), Dommanip () and then the script to take out the execution if it is external JS dynamic load, if it is inline JS with eval () summed up, Dommanip mainly did two things: 1. Depending on the parameters passed in by the user, multiple fragment are created and passed through the callback function parameter to 2. Controls script execution, does not execute when creating fragment, and is executed uniformly after the last DOM operation ends