Document.getElementsByClassName()

返回一个类似数组的对象，包含了所有指定 class 名称的子元素。当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定class名称的子元素。

语法

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

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

示例

获取所有 class 为 'test' 的元素:

document.getElementsByClassName('test');

获取所有 class 同时包括 'red' 和 'test' 的元素.

document.getElementsByClassName('red test');

在id 为'main'的元素的子节点中，获取所有class为'test'的元素

document.getElementById('main').getElementsByClassName('test');

我们还可以对任意的  HTMLCollection 使用 Array.prototype 的方法，调用时传递  HTMLCollection 作为方法的参数。这里我们将查找到所有class为 'test' 的 div 元素:

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});

浏览器兼容性

规范

• W3C: getElementsByClassName