在 JavaScript 中通过类名选择元素

要通过给定的类名选择元素，可以使用 getElementsByClassName() 方法。

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

getElementsByClassName() 方法返回一个元素集合，这些元素的类名与您传递给方法的 CSS 类相同。返回的集合是一个 NodeList。

HTML

<html>
<head>
  <title>JavaScript getElementsByClassName() example</title>
</head>
<body>
  <div id="container">
    <p class="note">The first note.</p>
    <p class="note">The second note.</p>
  </div>
  <p class="note">The third note.</p>
  <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

app.js

let elements = document.getElementsByClassName('note');

for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].innerHTML);
}Code language: JavaScript (javascript)

输出

The first note.
The second note.
The third note.

由于 getElementsByClassName() 是 Element 的方法，因此您可以在容器中选择具有给定类的元素。

以下示例仅显示容器内具有 CSS 类 note 的元素的 innerHTML。

let container = document.getElementById('container');
let elements = container.getElementsByClassName('note');

for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].innerHTML);
}Code language: JavaScript (javascript)

输出

The first note.
The second note.

本教程是否有用？