Implementation of native html element selector, similar to jquery selector and jquery Selector

Implementation of native html element selector, similar to jquery selector and jquery Selector

To be a front-end, you need to select elements. Although jquery and various major js libraries have already helped me build the wheel, I want to implement one by myself, so the project is not busy, add your own js file. The following is the implementation code. You can call it in the format of $ g ("# content. op"), which is the same as the parameters of jquery $ (): a ui front-end framework developed over 5 years!

Function $ findChilds (parentNode, text) {// if the parent node is not input, the default value is body if (parentNode = undefined) parentNode = document. body; var childNodes = parentNode. childNodes; var results = []; // if (childNodes. length> 0) {var length = childNodes. length; // cyclically query the nodes that match the text (var I = 0; I <length; ++ I) {// in three cases: className, id, tagName switch (text. substr (0, 1) {case '. ': // these two types: parentNode. getElementsByClassName, pa Worker node. all // is added later. if neither of the two methods is supported by the browser, then only the violent recursion of 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;} // neither of the preceding methods is supported. You can directly determine if (childNodes [I]. className = te Xt. substr (1) results. push (childNodes [I]); break; case '#': return [document. getElementById (text. substr (1)]; default: return parentNode. getElementsByTagName (text);} // after judgment, pass the child element of the current child element to $ findChilds for recursive search. The returned results are directly merged with the current results. results = results. concat ($ findChilds (childNodes [I], text) ;}} return results;} String. prototype. vtrim = function () {return this. replace (/^ \ s + | \ s + $/g, '');} function $ g (text ){ // Split the parameter var values = text by space. vtrim (). split (""); var length = values. length; // if there is only one selection parameter, you can directly call the dom method 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]);} // many result nodes that meet the parameters are generated during each iteration. The name of the result node is parentNodes, the first cycle defaults to body var parentNodes = [document. body]; // the outer loop is used to iterate each input parameter for (var I = 0; I <length; ++ I) {var jlength = parentNodes. length; var results = []; // if the length of values is zero, the extra space is displayed. // For example: $ g (". content "); in this case, directly jump into the next loop without executing the code. var tmpValue = values [I]. vtrim (); if (tmpValue. length <= 0) continue; // The inner loop is to iterate each result node, // find the result that meets the selection criteria in the result node. Of course, the first time is body for (var j = 0; j <jlength; ++ j) {// $ findChilds is the above function, the var result = $ findChilds (parentNodes [j], values [I]. vtrim (); var rlength = result. length; // because the returned result is sometimes an html container and cannot be directly added to the array concat, there is space for optimization, but the performance is not considered for (var k = 0; k <rlength; ++ k) results. push (result [k]);} // No result. undefined if (results = undefined | results. length <= 0) return undefined; // The result array is returned directly in the last loop. However, if the last selection condition is id, if (I = length-1) {if (values [I]. substr (0, 1) = "#") return results [0]; return results;} parentNodes = results ;}}

 

After testing in ff ie6, simply selecting id is much faster than jquery,
I tested a few of the other selection modes faster than jquery. Well-developed 5-year UI front-end framework!
Of course, the test cannot be comprehensive, there may be bugs, and pseudo-class choices like. content: first-child are not supported.

Use of html native Selector

HTML5 introduces the document. querySelector and document. querySelectorAll methods to the Web API to conveniently select elements from the DOM. The function is similar to the jQuery selector. This makes it much easier to write native JavaScript code. The answer is:
Var test1 = document. querySelector ("# test1"); test. innerHTML = "Hello, web Front-end engineer"; var add = document. querySelectorAll (". add "); add. innerHTML = "Welcome to Yicheng ";

Q: Can I select two elements in the jquery selector? For example, $ ("mainNav, secondeNav ")

Selector1, selector2, selectorN
Returned value: Array <Element (s)> selector1, selector2, selectorN
Overview
Combine the elements matched by each selector and return them together.

You can specify any number of selectors and merge the matched elements into a single result.

Parameters
Selector1Selector a valid Selector

Selector2Selector another valid Selector

SelectorN (optional) any number of valid Selector
Example
Description:
Find the element that matches any class.

HTML code:
<Div> div </div>
<P class = "myClass"> p class = "myClass" </p>
<Span> span </span>
<P class = "notMyClass"> p class = "notMyClass" </p>

JQuery code:
$ ("Div, span, p. myClass ")

Result:
[<Div> div </div>, <p class = "myClass"> p class = "myClass" </p>, <span> span </span>]