Document.getElementsByClassName()

返回一个类似数组的对象，包含了所有指定 class 名称的子元素。 Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

语法

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