元素：getElementsByClassName() 方法

The Element method getElementsByClassName() 返回一个实时 HTMLCollection，其中包含每个具有指定类名或类名的后代元素。

该方法 getElementsByClassName() 在 Document 接口上的工作方式基本相同，只是它对整个文档起作用，从文档根开始。

语法

js
getElementsByClassName(names)

参数

names

一个字符串，包含要匹配的一个或多个类名，用空格分隔。

返回值

一个 HTMLCollection，它提供每个类在 names 中的成员的实时更新列表。

使用说明

与往常一样，返回的集合是实时的，这意味着它始终反映调用函数的元素所根植的 DOM 树的当前状态。当与names匹配的新元素添加到子树时，它们会立即出现在集合中。类似地，如果现有元素不匹配names，但其类集已调整以使其匹配，则它会立即出现在集合中。

反之亦然；当元素不再匹配名称集时，它们会立即从集合中删除。

注意：在怪癖模式中，类名以不区分大小写的方式进行比较。否则，它们区分大小写。

示例

匹配单个类

要查找在其类中包含单个指定类的元素，我们只需在调用getElementsByClassName()时提供该类名。

js
element.getElementsByClassName("test");

此示例查找所有具有test类的元素，这些元素也是具有main ID 的元素的后代。

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

匹配多个类

要查找其类列表同时包含red和test类的元素

js
element.getElementsByClassName("red test");

检查结果

您可以使用返回的HTMLCollection上的item()方法或标准数组语法来检查集合中的各个元素。但是，以下代码将无法按预期工作，因为只要删除任何"colorbox"类，"matches"就会发生改变。

js
const matches = element.getElementsByClassName("colorbox");

for (let i = 0; i < matches.length; i++) {
  matches[i].classList.remove("colorbox");
  matches.item(i).classList.add("hueframe");
}

相反，请使用另一种方法，例如

js
const matches = element.getElementsByClassName("colorbox");

while (matches.length > 0) {
  matches.item(0).classList.add("hueframe");
  matches[0].classList.remove("colorbox");
}

此代码查找具有"colorbox"类的后代元素，通过调用item(0)添加"hueframe"类，然后删除"colorbox"（使用数组符号）。然后，另一个元素（如果有的话）将成为item(0)。

使用数组方法过滤结果

我们还可以对任何HTMLCollection使用Array方法，方法是将HTMLCollection作为方法的this值传递。这里我们将找到所有具有test类的<div>元素

js
const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
  testElements,
  (testElement) => testElement.nodeName === "DIV",
);

规范

规范
DOM 标准
# ref-for-dom-element-getelementsbyclassname

浏览器兼容性

BCD 表格仅在浏览器中加载