DOM-->getElementsByClassName

getElementsByClassName

返回一个类似数组的对象，包含了所有指定 class 名称的子元素

语法

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

• elements 是查找到的所有元素的集合 HTMLCollection .
• names 是一个字符串，表示用于匹配的 class 名称列表; class 名称通过空格分隔
• getElementsByClassName 可以在任意的元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	3.0	9.0	(Yes)	(Yes)

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

指定标签

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

 基本课件