Element.getElementsByClassName() - Web API 接口参考 编辑

Element.getElementsByClassName() 方法返回一个即时更新的（live） HTMLCollection，包含了所有拥有指定 class 的子元素。当在 document 对象上调用此方法时，会检索整个文档，包括根元素。

相似地，getElementsByClassName() 方法会在整个文档上执行；它返回指定拥有指定 class 名称的 document 根节点的后代元素。

语法

var elements = element.getElementsByClassName(names);

• elements 是一个即时更新的（live）HTMLCollection。
• names 是一个字符串，表示要匹配的类名（class names）列表；类名被空白符分隔。
• element 是文档中的任一 Element。

例子

获取所有包含class名称为 test 的元素：

element.getElementsByClassName('test');

获取所有包含 red 和 test class名的元素：

element.getElementsByClassName('red test');

获取 id 为 main 的元素的所有包含一个 test class名的后代元素：

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

可以在任何 HTMLCollection 上面使用 Array.prototype 的方法，要把 HTMLCollection 作为该方法的上下文对象（this）。下例，查找类名为 test 的元素中的所有 <div> 元素：

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

规范

Specification	Status	Comment
DOM Element.getElementsByClassName()	Living Standard	Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes) [1]	(Yes)	(Yes)	(Yes)

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	? [1]	?	?	?

[1] Prior to Firefox 19, this method was returning a NodeList; it was then changed to reflects the change in the spec.