JavaScript getElementsByClassName 按类名选择元素

在本教程中，您将学习如何使用 getElementsByClassName 方法通过类名选择元素。

getElementsByClassName 方法简介

getElementsByClassName 方法返回与指定类名匹配的子元素，它返回一个类似数组的对象。getElementsByClassName 方法可以在 document 元素或其它元素对象上调用。

当在 document 元素调用 getElementsByClassName 方法时，它会搜索整个 HTML 文档并返回文档的中与指定类名匹配的元素：

let elements = document.getElementsByClassName(names);

但是，当在指定的元素调用 getElementsByClassName 方法时，它会在当前元素搜索子元素并返回与指定类名匹配的元素：

let elements = rootElement.getElementsByClassName(names);

getElementsByClassName 方法返回匹配 elements 是的实时的 HTMLCollection，类似于双向绑定。

names 参数是一个字符串，表示一个或多个要匹配的类名，要使用多个类名，请用空格分隔它们。

JavaScript getElementsByClassName 方法示例

让我们看看如何使用 getElementsByClassName 方法的例子。假设您有以下 HTML 文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript getElementsByClassName</title>
</head>
<body>
    <header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
</body>
</html>

在元素调用 getElementsByClassName

下面的示例说明如何使用 getElementsByClassName()方法来选择 <ul> 的子元素 <li> ：

let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');

let data = [].map.call(items, item => item.textContent);

console.log(data);

输出：

['HTML', 'CSS', 'JavaScript', 'TypeScript']

代码是如何运行的：

首先，使用 getElementById 方法选择具有类名是 menu 的元素 <ul>。
然后，使用 getElementsByClassName 方法选择作为 <ul> 子元素的 <li> 元素。
最后借用 Array 对象的 map() 方法创建 <li> 元素文本内容的数组。

在 document 调用 getElementsByClassName

要搜索与类名 heading-secondary 匹配的元素，请使用以下代码：

let elements = document.getElementsByClassName('secondary');
let data = [].map.call(elements, elem => elem.textContent);

console.log(data);

输出：

["Example 1", "Example 2"]

此示例在document 对象调用 getElementsByClassName() 方法。因此，它会在整个HTML 文档中搜索与指定类名 secondary 匹配的元素。

结论

使用 JavaScript getElementsByClassName 方法可以指定一个或多个类名选择子元素。