dom06 替换类名查找类名改进部分split()切割数组方法

day06-49
替换类名：
提示：用split()先切割类名，转换成数组，循环遍历，再用join();拼接。
可以解决replace();从左往右的不完全匹配替换问题。

var btn=document.getElementById('btn');
var demo=document.getElementById('demo');
btn.onclick=function(){
    //demo.className=demo.className.replace("show","hide");
    replaceClassName(demo,"show","hide");
};
//封装函数
/*function replaceClassName(element,oldStr,newStr){
    element.className=element.className.replace(oldStr,newStr);
};*/

//替换类名改进：
function replaceClassName(element,oldStr,newStr){
    var newArr=element.className.split(" ");
    for (var i = 0; i < newArr.length; i++) {
        if (newArr[i]===oldStr) {
            newArr[i]=newStr;
        }
    }   
    element.className=newArr.join(" ");
}

查找类名

<script>
    //查找类名
    //此方法存在问题：出现不完全匹配查找，解决方法可以用split()切割类名返回数组遍历数组匹配
    /*思路提示：1封装通过类名获取元素的函数2能力检测3否则找到元素内所有的标签 4判断是否符合要求5符合要求的放到新数组中 返回数组*/
    var father= document.getElementById('father');
    console.log(getElementByClassName(father,"show"))
 //封装 通过类名获取元素 的函数
    /*function getElementByClassName(element,className){
    //能力检测
    if (element.getElementByClassName) {
        return element.getElementByClassName(className);
    }else{
        //先寻找element里边所有的标签 然后判断类名是否符合要求
        var filterArr=[];//符合要求的放到数组中
        var elements=element.getElementsByTagName('*');
        for (var i = 0; i < elements.length; i++) {
            if(elements[i].className.indexOf(className) !==-1){
                filterArr.push(elements[i]);
            }
        };
        return filterArr;

    };
}*/
function getElementByClassName(element,className){
    //能力检测
    if (element.getElementByClassName) {
        return element.getElementByClassName(className);
    }else{
        //先找到所有的标签 判断类名是否符合要求 切割数组
        var filterArr=[];
        var elements=element.getElementsByTagName('*');
        for (var i = 0; i < elements.length; i++) {
            var newArr=elements[i].className.split(" ");//切割标签中的类名返回新数组
            for (var i = 0; i < newArr.length; i++) {//遍历新数组中的每个元素
                if (newArr[i]===className) {
                    filterArr.push(elements[i]);
                    break;
                };

            };
        }
            return filterArr;
    };
}
</script>