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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.0 9.0 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

规范

文档标签和贡献者

 此页面的贡献者: nianxiaoge, jahentao, zieg, iugo
 最后编辑者: nianxiaoge,