Element.getElementsByClassName()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

语法

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

例子

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

js
element.getElementsByClassName("test");

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

js
element.getElementsByClassName("red test");

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

js
document.getElementById("main").getElementsByClassName("test");

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

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

规范

Specification
DOM Standard
# ref-for-dom-element-getelementsbyclassname

浏览器兼容性

BCD tables only load in the browser