To do the front-end, you need to select elements, although there are jquery and the large JS library has helped me build the wheel, but I want to try to achieve one, just the project is not busy, just add their own JS file, the following is the implementation code. This format can be invoked with $g ("#content. Op"), just like the parameters of jquery $ ():
function $findChilds (parentnode, text) {//If the parent node is not passed in, the default is body if (parentnode = = undefined) parentnode = document.body;
var childnodes = parentnode.childnodes;
var results = [];
The child nodes are greater than 0 before cyclic if (Childnodes.length > 0) {var length = Childnodes.length; Loop lookup node with text for (Var i=0;i<length;++i) {//three cases, Classname,id, tagName switch (text.substr (0, 1)) {case '. ':/ /These two: Parentnode.getelementsbyclassname,parentnode.all//Are added later, if the browser does not support both methods, it can only be violent 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;
}//Either of the above methods are not supported, directly determine if (Childnodes[i].classname = = Text.substr (1)) Results.push (childnodes[i));
Break
Case ' # ': return [document.getElementById (TEXT.SUBSTR (1)]]; Default:return Parentnode.getelementsbytAgname (text);
///After judgment, the child elements of the current child element are passed into the $findchilds for recursive lookup, and the result of the return is merged directly with the present result results = Results.concat ($findChilds (childnodes[i), text);
} return results;
} String.prototype.vtrim = function () {return this.replace (/^\s+|\s+$/g, ');
function $g (text) {//By space split 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 will produce many parameters of the result node, where the result node name is Parentnodes, the first cycle defaults to the body var parentnodes = [Document.body];
The outer loop is the iteration for each incoming argument for (var i = 0; i < length; ++i) {var jlength = parentnodes.length;
var results = [];
Here if values are of zero length,//It is said to be the extra space,//For example: $g (". Content"); This situation does not execute the code to jump directly into the next loop var tmpvalue = Values[i].vtrim (); if (Tmpvalue.lengTh <= 0) continue; The inner loop loops for each result node of the iteration, and//finds 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 function above, which is to select the node's child node var 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 in the array, there is optimization space, but do not consider the performance first for (var k = 0; k < rlength; ++k) Results.push (result[k));
//No results returned immediately undefined if (results = = Undefined | | results.length <= 0) return undefined; The last loop returns the result array directly, but if the last selection condition is a select ID, then the array is not returned directly to the DOM object if (i = = length-1) {if (values[i].substr (0, 1) = "#") Retu
RN Results[0];
return results;
} parentnodes = results;
}
}
After the test under FF IE6 a simple selection ID is much faster than jquery,
the other partial selection mode The few I tested were faster than jquery.
Of course the test is not comprehensive, there may be bugs, and it does not support pseudo class selections like. Content:first-child.