原生的html元素选择器的实现，类似jquery选择器

做前端，需要选择元素，虽说有jquery和各大js库已经帮我造好了轮子，但我想试试自己实现一个，正好项目也不忙，正好加入自己的js文件中，下面是实现代码。用$g(“#content .op”)这种格式就可以调用，和jquery $()的参数一样: 可以500%提高开发效率的前端UI框架！  

function $findChilds(parentNode, text) 
{ 
    //如果不传入父节点的话，默认为body 
    if(parentNode == undefined) 
        parentNode = document.body; 
    var childNodes = parentNode.childNodes; 
    var results = []; 
    //子节点大于零才循环 
    if(childNodes.length > 0) 
    { 
        var length = childNodes.length; 
        //循环查找符合text的节点 
        for(var i=0;i<length;++i) 
        { 
            //三种情况，className，id， tagName 
            switch(text.substr(0, 1)) 
            { 
            case '.': 
                //这两种:parentNode.getElementsByClassName,parentNode.all 
//都是后来加上的，如果浏览器这两种方法都不支持，那就只能暴力递归了 
                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; 
                } 
                //以上两种方法都不支持，直接判断 
                if(childNodes[i].className == text.substr(1)) 
                    results.push(childNodes[i]); 
                break; 
            case '#': 
                return [document.getElementById(text.substr(1))]; 
            default: 
                return parentNode.getElementsByTagName(text); 
            } 
            //判断完后，把当前子元素的子元素传入$findChilds进行递归查找，返回的结果直接和现在的结果合并 
            results = results.concat($findChilds(childNodes[i], text)); 
        } 
    } 
    return results; 
}   
   
String.prototype.vtrim = function() { 
      return this.replace(/^\s+|\s+$/g, ''); 
}   
   
function $g(text) 
{ 
    //按照空格分割参数 
    var values = text.vtrim().split(" "); 
    var length = values.length; 
    //如果只有一个选择参数的话，就直接调用dom方法返回结果。 
    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]); 
        } 
    //每次迭代都会产生许多符合参数的结果节点,这里结果节点的名称为parentNodes，第一次循环默认为body 
    var parentNodes = [document.body]; 
    //外层循环为迭代每个传入的参数 
    for(var i = 0; i < length; ++i) 
    { 
        var jlength = parentNodes.length; 
        var results = []; 
        //这里如果values的长度为零的话， 
        //就说明是多出来的空格， 
        //例如:$g("      .content");这种情况不执行代码直接跳入下一循环 
        var tmpValue = values[i].vtrim(); 
        if(tmpValue.length <= 0) 
            continue; 
        //内层循环为迭代每个结果节点， 
        //在结果节点中查找符合选择条件的结果。当然第一次为body 
        for(var j=0;j<jlength;++j) 
        { 
            //$findChilds就是上边的那个函数，就是选择某个节点的子节点的 
            var result = $findChilds(parentNodes[j], values[i].vtrim()); 
            var rlength = result.length; 
            //因为返回的有时候是html容器，无法直接和数组concat所以倒入数组，这里有优化空间，但暂不考虑性能先这么做 
            for (var k = 0; k < rlength; ++k) 
                results.push(result[k]); 
        } 
        //没有结果，立即返回undefined 
        if(results == undefined || results.length <= 0) 
            return undefined; 
        //最后一次循环就直接返回结果数组，但是如果最后一个选择条件是选择id的话，那就不返回数组直接返回dom对象了 
        if (i == length - 1) 
        { 
            if (values[i].substr(0, 1) == "#") 
                return results[0]; 
            return results; 
        } 
        parentNodes = results; 
    } 
}

 

 

经过在ff ie6下的测试 单纯的选择id比jquery要快很多，
其他的部分选择模式我测试的少数比jquery要快。 可以500%提高开发效率的前端UI框架！   
当然测试不可能全面，还可能会有bug，而且不支持类似于.content:first-child这样的伪类选择。