Native HTML element selector similar to jquery selector _javascript tips

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.