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