Document：getElementsByClassName() 方法

getElementsByClassName 方法是 Document 接口的一部分，它返回一个类数组对象，其中包含所有具有给定类名(s) 的子元素。

当在 document 对象上调用时，将搜索整个文档，包括根节点。您也可以在任何元素上调用 getElementsByClassName()；它只会返回具有给定类名(s) 的指定根元素的后代元素。

警告：这是一个实时的 HTMLCollection。DOM 中的更改将在更改发生时反映在数组中。如果此数组选定的元素不再符合选择器，则会自动将其删除。在迭代时请注意这一点。

语法

js
getElementsByClassName(names)

参数

names

表示要匹配的类名(s) 的字符串；多个类名用空格分隔。

返回值

找到的元素的实时 HTMLCollection。

示例

获取所有具有“test”类的元素

js
document.getElementsByClassName("test");

获取同时具有“red”和“test”类的所有元素

js
document.getElementsByClassName("red test");

获取 ID 为“main”的元素内部所有具有“test”类的元素

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

获取第一个具有“test”类的元素，如果不存在匹配的元素则返回 undefined

js
document.getElementsByClassName("test")[0];

我们还可以通过将 HTMLCollection 作为方法的 this 值，在任何 HTMLCollection 上使用 Array.prototype 的方法。这里我们将找到所有具有“test”类的 div 元素

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

获取第一个类为“test”的元素

这是最常用的操作方法。

html
<html lang="en">
  <body>
    <div id="parent-id">
      <p>hello world 1</p>
      <p class="test">hello world 2</p>
      <p>hello world 3</p>
      <p>hello world 4</p>
    </div>

    <script>
      const parentDOM = document.getElementById("parent-id");

      const test = parentDOM.getElementsByClassName("test"); // a list of matching elements, *not* the element itself
      console.log(test); // HTMLCollection[1]

      const testTarget = parentDOM.getElementsByClassName("test")[0]; // the first element, as we wanted
      console.log(testTarget); // <p class="test">hello world 2</p>
    </script>
  </body>
</html>

多个类示例

document.getElementsByClassName 的工作原理与 document.querySelector 和 document.querySelectorAll 非常相似。仅选择具有所有指定 className 的元素。

HTML

html
<span class="orange fruit">Orange Fruit</span>
<span class="orange juice">Orange Juice</span>
<span class="apple juice">Apple Juice</span>
<span class="foo bar">Something Random</span>
<textarea id="resultArea" style="width:98%;height:7em"></textarea>

JavaScript

js
// getElementsByClassName only selects elements that have both given classes
const allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
let result = "document.getElementsByClassName('orange juice')";
for (let i = 0; i < allOrangeJuiceByClass.length; i++) {
  result += `\n  ${allOrangeJuiceByClass[i].textContent}`;
}

// querySelector only selects full complete matches
const allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (let i = 0; i < allOrangeJuiceQuery.length; i++) {
  result += `\n  ${allOrangeJuiceQuery[i].textContent}`;
}

document.getElementById("resultArea").value = result;

结果

规范

规范
DOM 标准
# ref-for-dom-document-getelementsbyclassname①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。