0

JavaScript getElementsByClassName 按类名选择元素

 6 months ago
source link: https://www.myfreax.com/javascript-getelementsbyclassname/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
dom

JavaScript getElementsByClassName 按类名选择元素

getElementsByClassName 方法返回与指定类名匹配的子元素，它返回一个类似数组的对象

Updated At 28 Oct 2023 3 min read
By myfreax
JavaScript getElementsByClassName 按类名选择元素

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 方法可以指定一个或多个类名选择子元素。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK