HTML DOM getElementsByClassName() 方法

语法

document.getElementsByClassName(classname)

• classname：必需，一个或多个类名，多个类名之间使用空格分隔。

返回值

getElementsByClassName() 方法返回一个 HTMLCollection 对象，该对象是一个包含指定类名的所有元素的集合。HTMLCollection 对象是一个类数组对象，可以通过索引访问其中的元素。

示例

假设我们有以下 HTML 结构：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName() 方法示例</title>
</head>
<body>
    <div class="container">
        <p class="text">第一个段落</p>
        <p class="text">第二个段落</p>
        <p class="text">第三个段落</p>
    </div>
</body>
</html>

我们可以通过以下 JavaScript 代码获取所有类名为 text 的 <p> 元素：

const elements = document.getElementsByClassName('text');
for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].textContent);
}

上述代码将会输出：

第一个段落
第二个段落
第三个段落

注意事项

• getElementsByClassName() 方法返回的是一个动态集合，即当文档中的元素发生改变时，集合中的元素也会相应地更新。
• 如果指定的类名不存在，方法将返回一个空的 HTMLCollection 对象。
• 返回的 HTMLCollection 对象是一个只读对象，不支持数组的方法，但可以通过索引访问其中的元素。

通过 getElementsByClassName() 方法，我们可以方便地选取文档中具有相同类名的元素，并对它们进行操作。这在实现一些动态效果或者样式的时候非常有用。希望本文对你有所帮助！