Native HTML element selectors are similar to jquery selectors

  • 2020-03-30 04:07:11
  • OfStack

Do the front end, need to choose the element, although there are jquery and the big js library has helped me to build the wheel, but I want to try to implement their own, just the project is not busy, just add their own js file, the following is the implementation code. It can be called in the form of $g(" # content.op "), just like the parameter of jquery $() :


function $findChilds(parentNode, text) 
{ 
//The default is body if the parent is not passed in
if(parentNode == undefined) 
parentNode = document.body; 
var childNodes = parentNode.childNodes; 
var results = []; 
//The child node is greater than zero
if(childNodes.length > 0) 
{ 
var length = childNodes.length; 
//The loop looks for nodes that match the 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
//It's all added later, and if the browser doesn't support either of these methods, it's a violent recursion
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 above methods supports direct judgment
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 judging, the child element of the current child element into $findChilds recursive search, the result returned directly and the current result merge
results = results.concat($findChilds(childNodes[i], text)); 
} 
} 
return results; 
} 

String.prototype.vtrim = function() { 
return this.replace(/^s+|s+$/g, ''); 
} 

function $g(text) 
{ 
//Split parameters by space
var values = text.vtrim().split(" "); 
var length = values.length; 
//If there is only one parameter to select, 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 produces a number of result nodes that match the parameters, the name of which is parentNodes, and the default for the first loop is the body
var parentNodes = [document.body]; 
//The outer loop iterates over each parameter passed in
for(var i = 0; i < length; ++i) 
{ 
var jlength = parentNodes.length; 
var results = []; 
//Here if the length of values is zero,
//That means the extra space,
//For example: $g (" content "); This situation does not execute the code directly into the next loop
var tmpValue = values[i].vtrim(); 
if(tmpValue.length <= 0) 
continue; 
//The inner loop is the iteration of each result node,
//Find the result in the result node that matches the selection criteria. The first time, of course, is the body
for(var j=0;j<jlength;++j) 
{ 
//$findChilds is the top function that selects the children of a node
var result = $findChilds(parentNodes[j], values[i].vtrim()); 
var rlength = result.length; 
//Because what's returned is sometimes an HTML container, you can't concat the array directly, so you're going to pour into the array, and there's room for optimization, but let's do that first, regardless of performance
for (var k = 0; k < rlength; ++k) 
results.push(result[k]); 
} 
//No result, return undefined immediately
if(results == undefined || results.length <= 0) 
return undefined; 
//The last loop returns the result array directly, but if the last selection condition is to select the id, the dom object is returned instead of the array
if (i == length - 1) 
{ 
if (values[i].substr(0, 1) == "#") 
return results[0]; 
return results; 
} 
parentNodes = results; 
} 
}


Related articles: