Dojo/dom-construct.todom Method Learning Notes

The Todom method is used to convert an HTML tag string into a DOM node. After 1.7 The Todom method was assigned to the Dom-construct module.

function (domconstruct) {    // take a string and turn it into a DOM node    var node = Domcon Struct.todom ("<div>i ' m a node</div>");});

Dom operation is every need to make a contribution to the front-end developers must cross the threshold, the class library is often used to rely on, for the common functions of the class library, we have to know its why. Todom to convert HTML to DOM nodes, I can think of two methods:

• The regular expression is used to match all tags in order, first the correct regular is required, and then the correct node relationship is ensured.

• Using the DOM API to do this, we can create an element using innerHTML to automatically convert

Obviously, the second method is simple, all given to the browser to do, we just have to get the child node of the element, but the innerHTML tag has its particularity:

• innerHTML all child elements as text output when the value is taken;

• When a value is set, the string is converted to a DOM node, and then the child elements in the element are replaced with the DOM node, if there is a special label at the beginning of the string, such as Tbody, THEAD, TFOOT, TR, TD, Th, caption, Colgroup, col, etc. For labels that must have a wrapper element, the browser does not complete the wrapper elements for these tags, or unify them as text, or ignore them, so we need to make some corrections to the HTML tags, mainly for the labels that must exist in the packaging element. These tags are ignored by the browser as innerHTML assignments, but if they are mounted directly to the DOM tree as DOM nodes, the browser automatically creates an implied wrapper element for them. So when we encounter the HTML fragments at the beginning of these tags, we need to manually complement the missing wrapper elements.

Let's take a look at how the Dom-construct module is handled.

Find all the elements to complement: Tbody, THEAD, TFOOT, TR, TD, Th, caption, Colgroup, col, legend, Li;dojo use the following structure to manage some missing tags:

 var  tagwrap = {option: [ "Select "", tbody: [ "table"  "table" " table " "Table", "Tbody"  "Table", "Tbody", "tr" ], th: [ "Table", "Thead", "tr"  "FieldSet" 
        
         ], caption: [
         "table"  "table" ], col: [ "Table", "Colgroup"  "ul" ] },

After this step, there are two more properties in each item in Tagwrap, Eg:tagWrap.tr.pre = "<table><tbody>" and tagWrap.tr.post = "</tbody> </table> ";

 for (var in tagwrap) {        if(Tagwrap.hasownproperty (param)) {              var tw = Tagwrap[param];             = param = = = "option"? ' <select multiple= "multiple" > ":" < "+ Tw.join (" >< ") +" > ";             = "</" + tw.reverse (). Join ("></") + ">";        }    }

　　

1. The innerHTML method requires an extra element as a temporary container, so use the variable to manage this extra element:

var retag =/<\s* ([\w\:]+)/,// used to determine if the string parameter contains an HTML tag masternode = {},//  As a warehouse to manage temporary containers masternum = 0,//Z These two variables are used to identify the temporary container mastername = "__" + Dojo._scopename + "Todomid";

2. In the Todom method, first create a temporary container, which is a DIV element:

Doc = Doc | | Win.doc;         var masterid = Doc[mastername];         if (! MasterID) {            = MasterID = ++masternum + "";             = Doc.createelement ("div");        }

 3, and then determine whether the Frag contains HTML tags, if it contains HTML tags and we need to complement the packaging elements, then the above generated pre and post complement the label passed to master the innerHTML of this container, After this step, we find the DOM tree corresponding to our incoming HTML tag, assign it to master, and assign it to master.innerhtml

if we don't need the wrapper.

 var  match = Frag.match (retag), tag = match? Match[1].tolowercase (): ""  = master        Node[masterid], wrap, I, FC, DF;  if  (Match && Tagwrap[tag]) {WR            AP  = Tagwrap[tag];            master.innerhtml  = wrap.pre + frag + Wrap.post;  for  (i = wrap.length; i;--i) {Mas            ter  = Master.firstchild; }}  else  {master.innerhtml = Frag; }

Here is simply to think that if the regular match is packaged, according to my understanding, the regular writing should be:/^<\s* ([\w\:]+)/, the reason for the following example:

The first expression is an error because the "ADFFD" part is used as a text node in the DOM, and the text node has no child nodes. Once the regular is changed, the text node is added to the DOM if it is not the HTML tag to begin with.

4. After the HTML tag is converted to DOM, if only one element returns this element, the converted element is placed in the document fragment.

 if  (master.childNodes.length = = 1 return  master.removechild (master.firstchild); //  Domnode   "DF  = doc.createdocumentfragmen        T ();  while  ((fc = Master.firstchild) {//   intentional assignment   Df.appendchil        D (FC);  return  DF; //  DocumentFragment  

As a reference to the standard description, DocumentFragment is a lightweight document object that is able to extract part of a document's tree or create a new document fragment. You can add content from a document fragment to a document by AppendChild () or insertbefore (). When you pass a document fragment as an argument to both methods, you actually add all the child nodes of the document fragment to the corresponding location; The document fragment itself is never part of the document tree

Using innerHTML tags to create DOM elements, and automatically complement the missing tags, this is the Dom-construct module for the Todom method implementation ideas.

1Exports.todom =functiontodom (Frag, doc) {2         //Summary:3         //instantiates an HTML fragment returning the corresponding DOM.4         //frag:string5         //The HTML fragment6         //Doc:documentnode?7         //optional document to the creating DOM nodes, defaults to8         //Dojo/_base/window.doc if not specified.9         //returns:Ten         //Document fragment, unless it ' s a single node in which case it returns the node itself One         //Example: A         //Create a table row: -         //    | Require (["dojo/dom-construct"], function (domconstruct) { -         //    | var tr = domconstruct.todom ("<tr><td>First!</td></tr>"); the         //    | }); -  -Doc = Doc | |Win.doc; -         varMasterID =Doc[mastername]; +         if(!MasterID) { -Doc[mastername] = MasterID = ++masternum + ""; +Masternode[masterid] = doc.createelement ("div"); A         } at  -         if(Has ("ie") <= 8){ -             if(!doc.__dojo_html5_tested &&doc.body) { - Html5domfix (DOC); -             } -         } in  -         //Make sure the Frag is a string. toFrag + = ""; +  -         //find the starting tag, and get node wrapper the         varMatch =Frag.match (retag), *Tag = match? Match[1].tolowercase (): "", $master =Masternode[masterid],Panax Notoginseng Wrap, I, FC, DF; -         if(Match &&Tagwrap[tag]) { theWrap =Tagwrap[tag]; +master.innerhtml = wrap.pre + Frag +Wrap.post; A              for(i = wrap.length; i;--i) { themaster =Master.firstchild; +             } -}Else{ $master.innerhtml =Frag; $         } -  -         //One node shortcut = Return the node itself the         if(Master.childNodes.length = = 1){ -             returnMaster.removechild (Master.firstchild);//DomnodeWuyi         } the  -         //return multiple nodes as a document fragment WuDF =doc.createdocumentfragment (); -          while(FC = Master.firstchild) {//Intentional Assignment About Df.appendchild (FC); $         } -         returndf//DocumentFragment -};

Full Code

Dojo/dom-construct.todom Method Learning Notes