自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快!

最近做前端,需要选择元素,虽说有jquery和各大js库已经帮我造好了轮子,但我想试试自己实现一个,正好项目也不忙,正好加入自己的js文件中,下面是实现代码。用$g(“#content .op”)这种格式就可以调用,和jquery $()的参数一样:
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要快。
当然测试不可能全面,还可能会有bug,而且不支持类似于.content:first-child这样的伪类选择。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快!

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    抢个沙发支持下

    wo_is神仙8年前 (2010-11-12)回复
  2. #-48

    哇,厉害···

    Jankerli8年前 (2010-11-12)回复
  3. #-47

    $findChilds 貌似没有考虑 class=”classA classB“ 的这种情况

    . 在电子邮件中是允许的阿,留言版中的电子邮件输入框不允许有 .

    myhere8年前 (2010-11-13)回复
  4. #-46

    从你说“单纯的选择id比jquery要快很多”可以看出你测试一定有误,因为jQuery的id选择是直接返回调用document.getElementById的,所以效率和你的是没差的。。不信你看看jQuery源码

    QiQiBoY8年前 (2010-12-01)回复
  5. #-45

    这个非常需要。谢谢博主。

    杨永全7年前 (2012-01-22)回复
  6. #-44

    楼主 你那里递归是有问题的 我试过了 switch 那return 完之后执行不到那个递归,你看看是不是我测试了下 不行,怎么回事呢 $g(“#div1 .a div”) 获取不到div的 只能获取到.a 那里的

    张丽3年前 (2016-03-12)回复
  7. #-43

    说错了, 可以获取的到,但是我不明白 switch 那return 完之后执行不到那个递归 是怎么回事的啊,我console.log(1);都没反应的

    张丽3年前 (2016-03-12)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏