We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

浏览器兼容性

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!

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,