getElementsByClassName

返回一個(gè)類(lèi)似數(shù)組的對(duì)象，包含了所有指定 class 名稱(chēng)的子元素

語(yǔ)法

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

• elements 是查找到的所有元素的集合 HTMLCollection .
• names 是一個(gè)字符串，表示用于匹配的 class 名稱(chēng)列表; class 名稱(chēng)通過(guò)空格分隔
• getElementsByClassName 可以在任意的元素上調(diào)用，不僅僅是 document。 調(diào)用這個(gè)方法的元素將作為本次查找的根元素.

瀏覽器兼容性

手寫(xiě)getElementsByClassName

由于此方法的兼容性，我們?cè)趇e9以前需要手寫(xiě)這個(gè)方法

function getElementsByClassName(name){
    var findArr = [];
    var arr = document.getElementsByTagName('*');
    
    for(var i=0; i<arr.length; i++){
        if(arr[i].className === name){
            findArr.push(arr[i]);
        }
    }

    return findArr;
}

上面的方法如果遇到有兩個(gè)class的時(shí)候就會(huì)出問(wèn)題
比如說(shuō)<li class="box box1"></li>

function getElementsByClassName(name){
    var findArr = [];
    var arr = document.getElementsByTagName('*');
    
    for(var i=0; i<arr.length; i++){
        var classList = arr[i].className.split(' ');
        for(var j=0; j< classList.length; j++){
            if(classList[j] === name){
                findArr.push(arr[i]);
                break;
            }
        }
    }

    return findArr;
}

指定查找范圍

function getElementsByClassName(rootElement,name){
    var findArr = [];
    var arr = rootElement.getElementsByTagName('*');
    
    for(var i=0; i<arr.length; i++){
        var classList = arr[i].className.split(' ');
        for(var j=0; j< classList.length; j++){
            if(classList[j] === name){
                findArr.push(arr[i]);
                break;
            }
        }
    }

    return findArr;
}

指定標(biāo)簽

function getElementsByClassName(rootElement,tagName,name){
    var findArr = [];
    var arr = rootElement.getElementsByTagName(tagName);
    
    for(var i=0; i<arr.length; i++){
        var classList = arr[i].className.split(' ');
        for(var j=0; j< classList.length; j++){
            if(classList[j] === name){
                findArr.push(arr[i]);
                break;
            }
        }
    }

    return findArr;
}