mozilla

Element.getElementsByClassName()

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

获取所有包含 redtest class名的元素:

element.getElementsByClassName('red test');

获取 idmain 的元素的所有包含一个 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

浏览器兼容性

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.

文档标签和贡献者

向此页面作出贡献: teoli, AlexChao
最后编辑者: teoli,