JavaScript getElementsByClassName() 方法

摘要：在本教程中，您将学习如何使用 getElementsByClassName() 方法根据类名选择元素。

介绍 getElementsByClassName() 方法

getElementsByClassName() 方法返回一个类似数组的对象，其中包含具有指定类名的子元素。

以下是 getElementsByClassName() 方法的语法

getElementsByClassName(names)

在此语法中

names 参数表示要匹配的一个或多个类名。多个类名用空格隔开。

如果找不到具有类名的元素，该方法将返回 undefined。

请注意，getElementsByClassName() 方法在 document 元素和其他任何 DOM 元素上都可用。

当您在 document 元素上调用 getElementsByClassName() 方法时，它将搜索整个文档并返回匹配的元素

let elements = document.getElementsByClassName(names);Code language: JavaScript (javascript)

但是，当您在特定元素上调用 getElementsByClassName() 方法时，它将返回该特定元素的具有给定类名的后代

let elements = rootElement.getElementsByClassName(names);Code language: JavaScript (javascript)

该方法返回 elements，它是匹配元素的实时 HTMLCollection。

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>Code language: HTML, XML (xml)

1) 在元素上调用 JavaScript getElementsByClassName() 的示例

以下示例说明了如何使用 getElementsByClassName() 方法选择 <li> 项目，这些项目是 <ul> 元素的后代

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

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

console.log(data);Code language: JavaScript (javascript)

输出

['HTML', 'CSS', 'JavaScript', 'TypeScript']Code language: JavaScript (javascript)

工作原理

首先，使用 getElementById() 方法选择具有类名 menu 的 <ul> 元素。
然后，使用 getElementsByClassName() 方法选择 <li> 元素，这些元素是 <ul> 元素的后代。
最后，通过借用 Array 对象的 map() 方法，创建一个包含 <li> 元素文本内容的数组。

2) 在文档上调用 JavaScript getElementsByClassName() 的示例

要搜索具有类 heading-secondary 的元素，您可以使用以下代码

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

console.log(data);Code language: JavaScript (javascript)

输出

["Example 1", "Example 2"]Code language: JavaScript (javascript)

此示例在 document 对象上调用 getElementsByClassName() 方法。因此，它将在整个文档中搜索具有类 secondary 的元素。

摘要

使用 JavaScript getElementsByClassName() 方法选择具有一个或多个类名的元素。

测验

本教程是否有用？