The most powerful feature of jquery is that it can look up elements through CSS selectors, and half of its source code is the sizzle CSS selector engine, and after the HTML5 specification comes out, Increased document.queryselector and Document.queryselectorall direct lookup elements, and the need to use jquery is greatly reduced if the mobile side is developed.
Using the JS code to implement the CSS selector, it is necessary to use regular expressions to identify the string, of course, the browser provides the original API more efficient, the following code only to do the principle of display, not the first performance,
For example
1 The Lookup ID is obviously more efficient with document.getElementById, the browser has made hash, once found elements do not have to traverse each node.
2 Find name with document.getelementsbyname more efficient, the browser has done a collection containing the name,
3) Find the sign signature With the document.getelementsbytagname more efficient, the browser has done a containing the tag set, from this set to find a subset of the obvious can not traverse a lot of elements, as the browser is not created when the update of the cache of the collection is not known, but from this collection is not The child nodes of the target element also have performance losses with contains.
Well, let's not consider the problem of optimizing selectors with the native API, only pure expression to do a simple implementation, the first use of regular judgment if it contains # is the ID selector, if the containing point is the class selector, if it contains [] is the attribute selector, set a good search target after starting to traverse the child node, To use a recursive function to traverse the id,name,classname,getattribute of the ChildNodes child node to match, return the element if it is matched. The complete code is as follows:
Html:
<body>
<div>
<span id= "sp_id" >hello,id</span>
<span class= "Sp_class" > hello,class</span>
<span name= "Sp_name" >hello,name</span>
<b>hello,tag</b >
</div>
</body>
Javascript:
<script type= "Text/javascript" > Function Find (el, selector) {//Lookup child nodes, using a search function similar to jquery, only supports id,class,attr
Selector, only the first element that returns a match var m = selector.match (/([#\.\[]) ([\w\w]+)/I) is supported;
var type, 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;
function Findchild (node) {var C;
for (var i = 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);
return result;
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>
Above this jquery principle series-css Selector's simple realization is small series to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.
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
