Home > Developer > JavaScript
When reading the following code, we will find that all the Dom operation functions call the domManip function.
Append: function (){
Return this. domManip (arguments, true, 1, function (){
This. appendChild ();
});
},
Prepend: function (){
Return this. domManip (arguments, true,-1, function (){
This. insertBefore (a, this. firstChild );
});
},
Before: function (){
Return this. domManip (arguments, false, 1, function (){
This. parentNode. insertBefore (a, this );
});
},
After: function (){
Return this. domManip (arguments, false,-1, function (){
This. parentNode. insertBefore (a, this. nextSibling );
});
},
What is the use of this domManip function?
Dom is the Dom element, and Manip is the abbreviation of Manipulate. Joining together means Dom operations.
Let's take a look at the following code. The code itself is very simple: Insert a row and a column in the table and write the text haha.
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> </title>
<Script type = "text/javascript">
Window. onload = function (){
Var table = document. getElementsByTagName ('table') [0];
Var tr = document. createElement ('tr ');
Var td = document. createElement ('td ');
Var txt = document. createTextNode ('hahaha ');
Td. appendChild (txt );
Tr. appendChild (td );
Table. appendChild (tr );
};
</Script>
</Head>
<Body>
<Table> </table>
</Body>
</Html>
However, the above Code fails to be executed on IE 6. You can try it. Browsers over IE 8 are easy to use.
Internet Explorer !!!!!
The reason for the failure on IE 6 is that IE 6 considers that the tr tag must be under the tbody. That is to say, if the code is written below, all browsers will be OK.
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> </title>
<Script type = "text/javascript">
Window. onload = function (){
Var table = document. getElementsByTagName ('table') [0];
Var tbody = document. createElement ('tbody ');
Var tr = document. createElement ('tr ');
Var td = document. createElement ('td ');
Var txt = document. createTextNode ('hahaha ');
Td. appendChild (txt );
Tr. appendChild (td );
Tbody. appendChild (tr );
Table. appendChild (tbody );
};
</Script>
</Head>
<Body>
<Table> </table>
</Body>
</Html>
The reason is clear. Let's take a look at how jQuery handles the tbody problem. jQuery is compatible with IE 6 browsers.
Append, prepend, before, and after are all functions that operate on Dom elements. If the inserted object is a table, add the tbody tag to the table.
Therefore, domManip is mainly used to solve this problem. It also processes the order of inserted elements. Let's look at the code at 1.1.
Here we will first describe the append function,
Append: function (){
Return this. domManip (arguments, true, 1, function (){
This. appendChild ();
});
}
This function calls the domManip function. The first input parameter is arguments. As we all know, arguments is a function parameter object and a class array object. Here, arguments may be an array containing dom elements or an html string.
The second parameter is true. The tbody must be processed. Because the current jQuery instance object is a table element, append a tr element, there will be tbody, so it needs to be processed. For example, before and after functions are not needed because they are external append elements.
The third parameter 1 represents the direction, 1 represents the forward, from top to bottom,-1 represents the reverse, from bottom to top. You can imagine that if prepend has a lot of dom elements, you must first prepend the last one of the many dom elements, then the last one, and so on until the first one. Otherwise, the dom elements after your prepend are reversed.
The fourth lattice parameter is the function, which calls the appendChild method to append elements. The underlying layer still needs to call the w3c dom function.
Through the above explanation, we will understand the meaning of the append parameter. Let's take a look at domManip and we will all understand it.
DomManip: function (args, table, dir, fn ){
Var clone = this. size ()> 1;
Var a = jQuery. clean (args );
Return this. each (function (){
Var obj = this;
If (table & this. nodeName = "TABLE" & a [0]. nodeName! = "THEAD "){
Var tbody = this. getElementsByTagName ("tbody ");
If (! Tbody. length ){
Obj = document. createElement ("tbody ");
This. appendChild (obj );
} Else
Obj = tbody [0];
}
For (var I = (dir <0? A. length-1: 0 );
I! = (Dir <0? Dir: a. length); I + = dir ){
Fn. apply (obj, [clone? A [I]. cloneNode (true): a [I]);
}
});
},
Clone indicates that cloneNode is required when there are several jQuery instance objects. The reason is simple. When your jQuery instance object is an element, You can append it. However, when multiple elements of the jQuery instance object, you append the args to the first element. What should you do with the second element of the jQuery instance? He has no append options ?! Therefore, to determine whether the size is greater than 1, cloneNode is required if the size is greater than 1.
Var obj = this;
This obj is an element in the jQuery object instance.
If (table & this. nodeName = "TABLE" & a [0]. nodeName! = "THEAD "){
Var tbody = this. getElementsByTagName ("tbody ");
If (! Tbody. length ){
Obj = document. createElement ("tbody ");
This. appendChild (obj );
} Else
Obj = tbody [0];
}
This section adds tbody to the table element. If not, the obj is directed to the tbody.
For (var I = (dir <0? A. length-1: 0 );
I! = (Dir <0? Dir: a. length); I + = dir ){
Fn. apply (obj, [clone? A [I]. cloneNode (true): a [I]);
}
Many people cannot understand this piece of code. It is actually the append sequence. Sometimes, prepend needs to be started from the last element.
Here I believe in the meaning of the domManip function.
Author: baozhifei
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
