getClassName封装

getElementsByClassName函数实现获取指定类名的子元素列表，语法如下：
var elements = getElementsByClassName(element, names);
使用示例如下：
如果html元素
<div id="example">
    <p id="p1" class="aaa bbb"/>
    <p id="p2" class="aaa ccc"/>
    <p id="p3" class="bbb ccc"/>
</div>

1.getElementsByClassName('aaa bbb')返回的是id为p1的元素

2.getElementsByClassName('ccc bbb')返回的是id为p3的元素

3.getElementsByClassName('aaa')返回的是id为p1和p2的元素集合

 

需求分析：

　　当形参names传入的是一个实参的时候，返回所有class名为此参数的集合；

　　当形参names传入多个实参，返回class名同时具备这些实参的元素；

　　所以直接用indexOf查找并不能实现需求，解题如下：

function getElementsByClassName(element,names){
            var elements = element.getElementsByTagName('*'); //element下的元素集合
            var name,
                ele,
                flag,
                outPut=[];

            var splitNames = names.split(" ");       //对传入的参数进行拆分，转为数组
                for(var i=0;i<elements.length;i++){
                    ele = elements[i].className;   //存储当前循环到的元素
                    flag = true;                             //状态管理，设定为true

                    for(var a=0;a<splitNames.length;a++){
                        name = splitNames[a];       //当前循环到的names，挨个进行检查
                        if(ele.indexOf(name) == -1){
                            flag = false;                //如果names函数中传入的参数有一个在当前ele的className中找不到，flag即为false并退出循环
                            break;
                        }    
                    }
                    if(flag){
                        outPut.push(elements[i]);  //一次循环后加入flag状态仍然为true，再往返回的数组中添加此元素
                    }
                }
                return outPut;

        }

 

转载于:https://www.cnblogs.com/q1005878349/p/7881773.html