Native HTML element selector implementation, similar to the jquery selector

Do the front-end, need to select elements, although there are jquery and the Big JS Library has helped me build the wheel, but I want to try to achieve a, just the project is not busy, just add their own JS file, the following is the implementation code. This format can be called with $g ("#content. Op"), like the parameters of jquery $ (): carefully developed 5 UI front-end framework!

function $findChilds (parentnode, text) {//If the parent node is not passed in, the default is body if (parentnode = = undefined) ParentNode = doc     Ument.body;     var childNodes = parentnode.childnodes;     var results = [];         The child node is greater than 0 before looping if (Childnodes.length > 0) {var length = Childnodes.length; Loop to find the text-compliant node for (Var i=0;i<length;++i) {//three cases, Classname,id, tagName switch             (Text.substr (0, 1)) {case '. '://both: Parentnode.getelementsbyclassname,parentnode.all//Are added later, if both methods are not supported, then Only the violence is recursive if (parentnode.getelementsbyclassname) return Parentnode.getelementsbyclassname                 (TEXT.SUBSTR (1));                     else if (parentnode.all) {var finded = [];                     var jlength = parentNode.all.length;      for (Var j=0;j<jlength;++j) if (Parentnode.all[j].classname = = Text.substr (1))                       Finded.push (Parentnode.all[j]);                 return finded; }//The above two methods are not supported, directly determine if (Childnodes[i].classname = = Text.substr (1)) ResU                 Lts.push (Childnodes[i]);             Break             Case ' # ': return [document.getElementById (TEXT.SUBSTR (1))];             Default:return parentnode.getelementsbytagname (text); }//After judging, the child element of the current child element is passed into $findchilds for recursive lookup, and the result of the return is merged directly with the present result results = Results.concat ($findChilds (childn         Odes[i], text)); }} return results;      } String.prototype.vtrim = function () {return this.replace (/^\s+|\s+$/g, ');}     function $g (text) {//separated by space parameter var values = Text.vtrim (). Split ("");     var length = Values.length;     If there is only one selection parameter, the DOM method is called directly to return the result. if (length = = 1) switch (VALUES[0].SUBSTR (0, 1)) {case "#": Return document.getelementByid (VALUES[0].SUBSTR (1)); Case ".": if (document.getelementsbyclassname) return Document.getelementsbyclassname (Values[0]         . substr (1));         Default:return document.getElementsByTagName (values[0]);     }//Each iteration produces many result nodes that match the parameters, where the result node is named Parentnodes, and the first loop defaults to body var parentnodes = [Document.body];         The outer loop iterates over each incoming parameter for (var i = 0; i < length; ++i) {var jlength = parentnodes.length;         var results = []; Here, if the values are of zero length,//It means that there are extra spaces,//For example: $g (". Content"); This situation does not execute code to jump directly into the next loop var tmpvalue = Valu         Es[i].vtrim ();         if (tmpvalue.length <= 0) continue; The inner loop iterates over each result node, and//finds the results in the result node that match the selection criteria. Of course the first time for the body for (Var j=0;j<jlength;++j) {//$findChilds is the upper function, that is, the selection of a node's child node VA             R result = $findChilds (Parentnodes[j], Values[i].vtrim ());             var rlength = result.length; Because the return is sometimes an HTML container,cannot be directly and arrays concat so pour into the array, where there is optimization space, but do not consider the performance first to do so for (var k = 0; k < rlength; ++k) Results.push (resu         Lt[k]);         }//No result, immediately return undefined if (results = = Undefined | | results.length <= 0) return undefined; The last loop returns the result array directly, but if the last selection criterion is the selection ID, then the array is returned directly to the DOM object with the IF (i = = length-1) {if (Valu             ES[I].SUBSTR (0, 1) = = "#") return results[0];         return results;     } parentnodes = results; } }

 

After the FF IE6 test the simple choice ID is much faster than jquery,
Other partial selection patterns I tested a few faster than jquery. 5 years of well-developed UI front-end framework!  
Of course, testing is not complete, there may be bugs, and pseudo-class selections similar to. Content:first-child are not supported.

Native HTML element selector implementation, similar to the jquery selector