那一抹温暖的阳光,是我们永恒的向往。
www.webbar.cn

js中getByClass()函数进化史

js中getByClass()函数进化史

对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法。尽管现在高版本的浏览器已经支持 getElementsByClassName()方法,但是对于低版本浏览器来说,还是无法兼容,在脱离其他库的时候,还是得自己封装一个方法。

下面列举几种网上常见的方法并说明存在的一些问题。

方法一

function getByClass1(oParent, sClass){
    var aRes = [];  //存放匹配结果的数组
    var aEle = oParent.getElementsByTagName('*');
    for(var i = 0; i < aEle.length; i++){
        if(aEle[i].className == sClass){
            aRes.push(aEle[i]);
        }
    }
    return aRes;
}

当然class里的值只有一个时,上面的方法没问题,但当值为多个时,就会出现问题。

<div></div>
<div></div>
<script>
    getByClass1(document, 'test');  //只获取到第一个div
</script>

 

方法二

出现问题的时候,我们会尝试着改进,对于多类名的情况我们可以用正则去匹配是否包含所要查找的class名,于是就出现了下面这种写法:

function getByClass2(oParent, sClass){
    var aRes = [];
    var re = new RegExp('\\b' + sClass + '\\b');    //匹配sClass是一个独立的单词
    var aEle = oParent.getElementsByTagName('*');
    for(var i = 0; i < aEle.length; i++){
        if(re.test(aEle[i].className)){
            aRes.push(aEle[i]);
        }
    }
    return aRes;
}

这种方法看似可以,解决了getByClass1()的问题,我也用了好长一段时间,但是还会有一个隐藏的bug。看下面的例子:

<div></div>
<div></div>
<div></div>
<script>
    getByClass2(document, 'test');  //结果获取到了第一个div和第三个div
</script>

理论上应该只获取到第一个,但是却和我们预期不一样。这个bug源于下面这段代码里的\b

var re = new RegExp('\\b' + sClass + '\\b');

我们先来看下\b在正则中的表示的意思

\b是正则表达式规定的一个特殊代码,代表着单词的开头或结尾,也就是单词的分界处。

通俗点说:\b就是匹配一个单词(从左边界到右边界)。

而问题也就出在这里,\b把除字母数字下划线外的其他字符都当成是边界,对于上面的例子中第三个class值为test-box,\b匹配时,把连字符(-)当作单词边界,所以也匹配了第三个div。

方法三

因此我们还需要对上面方法进行进一步改进,这里参考了stackoverflow上提到的一种方法:

How to Get Element By Class in JavaScript?

改进后的代码如下:

function getByClass3(oParent, sClass){
    var aRes = [];
    var re = new RegExp(' ' + sClass + ' ', 'i');   //匹配sClass时,两边需要有空格
    var aEle = oParent.getElementsByTagName('*');
    for(var i = 0; i < aEle.length; i++){
        if(re.test(' ' + aEle[i].className + ' ')){
            aRes.push(aEle[i]);
        }
    }
    return aRes;
}

这种方法舍去了用\b而采用空格来匹配边界,先在获取到的className值两边加上空格,这样就保证了className里的每个值两边都会有空格,然后再用正则去匹配。

用这种方法暂时还未发现问题,但是使用时,方法中的单引号内的空格一定不能落下。

那么这种方法是否就是比较完美的呢,其实不然,下面来看下更优的方案。

方法四(完美版)

文章开头已经提到,高版本的浏览器已经支持getElementsByClassName()方法。出于性能考虑,对支持的浏览器使用原生方法势必会更好。而对于低版本的浏览器使用上面的方法三。

function getByClass(oParent, sClass){
    if(oParent.getElementsByClassName){
        return oParent.getElementsByClassName(sClass);
    }else{
        var res = [];
        var re = new RegExp(' ' + sClass + ' ', 'i')
        var aEle = oParent.getElementsByTagName('*');
        for(var i = 0; i < aEle.length; i++){
            if(re.test(' ' + aEle[i].className + ' ')){
                res.push(aEle[i]);
            }
        }
        return res;
    }
}

当然方法四自认为是相对较好的方案,如果有更优秀的方法欢迎留言补充。

时间:2013-08-29

Comments are closed.

Search