chaihongjun.me

初级版通过class选择元素的函数

我们经常遇到这样的一个应用场景,在一堆li里面选择出class具有某种特定值的元素集合,并且对选择出的元素集合做新的操作。

例如代码片段:

<ul id="list">
<!-- 需要选中class="box"的元素 -->
<li class="box"></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
</ul>

选择具有某种class的元素集合,可以封装成如下函数:

//参数说明:
//oParent:代表需要被选择元素的父级元素
//sClass:代表被选择元素含有的class
function getElementsByClass(oParent, sClass) {
    //首先是根据父级元素找到全部需要筛选的子元素,因为不确定子元素
    //所以使用通配符*代表
    var aE = oParent.getElementsByTagName("*");
    // 再初始化一个数组,用于存放根据条件查找出来的元素 
    var aResult = [];
    //通过循环遍历oParent全部子元素
    for (var i = 0; i < aE.length; i++) {
        //当遍历过程发现元素的className等于被需要查找的class
        if (aE[i].className == sClass) {
            //将查找到的元素放入新的数组
            aResult.push(aE[i]);
        }
    }
    return aResult; //  返回全部符合条件的元素
}
//调用方式:
//选择代码片段class="box"的所有元素
getElementsByClass(document.getElementById("list"),"box");

若想对上述class="box"的li元素设置背景色灰色:

   var aBox = getElementsByClass(document.getElementById("list"),"box"); 
     for(var i=0;i<aBox.length;i++){
        aBox[i].style.background="gray";
     }


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:chaihongjun»