getElementsByClassName

返回一個類似數(shù)組的對象，包含了所有指定 class 名稱的子元素

語法

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

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

瀏覽器兼容性

手寫getElementsByClassName

由于此方法的兼容性，我們在ie9以前需要手寫這個方法

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;
}

上面的方法如果遇到有兩個class的時候就會出問題
比如說<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;
}