Home > Developer > Web Develop
The most powerful feature of jquery is that it can find elements through a CSS selector, half of which is the code for the sizzle CSS selector engine, and after the HTML5 specification comes out, Document.queryselector and Document.queryselectorall are added directly to find elements, and if you are doing mobile development, the need to use jquery is greatly reduced.
Using JS code to implement the CSS selector, it is necessary to use regular expressions to identify the string, of course, the browser provides a more efficient native API, the following code only to do the principle of display, not the priority performance,
For example
1) Find ID is obviously more efficient with document.getElementById, the browser has done a hash, one-time find elements do not traverse each node.
2) Find name with document.getelementsbyname more efficient, the browser has done a collection containing the name,
3) Look up the label signature With document.getelementsbytagname more efficient, the browser has already made a collection containing the tag, from this set to find a subset of the obvious can not traverse a lot of elements, as if the browser is not in the creation of elements to update the cache collection is unclear, but from this set to determine whether The child nodes of the target element also use contains to have a performance loss.
OK, let's not consider using the native API to optimize the selector, just use the pure expression to make a simple implementation, first use the regular judgment if it contains a # is the ID selector, if the containing dot is the class selector, if it contains [] is the property selector, set the search target and start traversing the child nodes, The recursive function is used to traverse whether the id,name,classname,getattribute of the ChildNodes child node matches and returns the element if it matches. The complete code is as follows:
Html:
<Body> <Div> <spanID= "sp_id">Hello,id</span> <spanclass= "Sp_class">Hello,class</span> <spanname= "Sp_name" >Hello,name</span> <b>Hello,tag</b> </Div> </Body>
Javascript:
<script type= "Text/javascript" >functionFind (el, selector) {//Find child nodes, use the Find function similar to jquery, support only the id,class,attr selector, and only support the return of the first matching element varm = Selector.match (/([#\.\[]) ([\w\w]+)/i); vartype, key,attrname, result; if(m) {if(M[1] = = ".") {type= "Class"; Key = M[2]; } Else if(M[1] = = "#") {type= "id"; Key = M[2]; } if(M[1] = = "[") {type= "attr"; M= M[2].match (/(\w+) = (\w+)/i); Attrname= M[1]; Key= M[2]; } } Else{type= "Tag"; Key =selector; } functionfindchild (node) {varC; for(vari = 0; i < node.childNodes.length; i++) {C=Node.childnodes[i]; if(Type = = "Class" && c.classname = =key) {Result=C; return; } Else if(Type = = "id" && c.id = =key) {Result=C; return; } Else if(Type = = "attr" && c.getattribute && c.getattribute (attrname) = =key) {Result=C; return; } Else if(type = = "Tag" && c.tagname && c.tagname.tolowercase () = =key) {Result=C; return; } findchild (c); }} findchild (EL); returnresult; } console.log (Find (Document.body,"#sp_id"). InnerHTML); Console.log (Find (Document.body,". Sp_class"). InnerHTML); Console.log (Find (Document.body,"[Name=sp_name]"). InnerHTML); Console.log (Find (Document.body,"B"). InnerHTML); </script>
JQuery principle Series-css Selector implementation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
