使用 JavaScript 通过多个类名获取元素

作者

使用 JavaScript 通过多个类名获取元素

Get Elements by multiple Class Names using JavaScript

使用该getElementsByClassName方法通过多个类名获取元素。

该方法返回一个类似数组的对象，其中包含具有所有给定类名的所有元素。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />

    <style>
      .green {
        background-color: greenyellow;
      }

      .orange {
        background-color: orange;
      }
    </style>
  </head>

  <body>
    <div class="box green">Box 1</div>
    <div class="box green">Box 2</div>
    <div class="box orange">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
// ✅ Get all elements with classes `box` AND `green`
const elements1 = document.getElementsByClassName('box green');
console.log(elements1); // 👉️ [div.box.green, div.box.green]

// ----------------------------------------------------

// ✅ Get all elements with classes `box` AND `green`
const elements2 = document.querySelectorAll('.box.green');
console.log(elements2); // 👉️ [div.box.green, div.box.green]

// ----------------------------------------------------

// ✅ Get all elements with at least one of the classes
const elements3 = document.querySelectorAll('.box, .green');
// 👇️ [div.box.green, div.box.green, div.box.orange]
console.log(elements3);
如果您需要获取与选择器匹配的第一个元素，请使用方法而不是. querySelectorquerySelectorAll

我们

在第一个示例中使用了document.getElementsByClassName方法。

索引.js
// ✅ Get all elements with classes `box` AND `green`
const elements1 = document.getElementsByClassName('box green');
console.log(elements1); // 👉️ [div.box.green, div.box.green]

该方法将一个或多个类名作为参数，并返回一个
HTMLCollection包含所有提供的类名的元素。

将集合转化为数组

如果您需要将 视为HTMLCollection数组，例如使用 之类的方法
forEach()，请使用 方法将其转换为数组Array.from()。

索引.js
const elements1 = Array.from(
  document.getElementsByClassName('box green')
);

elements1.forEach(element => {
  console.log(element);
});

Array.from方法从提供的可迭代对象创建一个新的浅拷贝数组。

使用 querySelectorAll 按多个类名获取元素

第二个示例使用
document.querySelectorAllbox方法获取具有类和的元素green。

索引.js
// ✅ Get all elements with classes `box` AND `green`
const elements2 = document.querySelectorAll('.box.green');
console.log(elements2); // 👉️ [div.box.green, div.box.green]
该方法将一个或多个 CSS 选择器作为参数，并返回NodeList包含与选择器匹配的元素的 。

获取第一个有多个类名的元素

如果您需要获取第一个具有类box和的元素green，请改用该querySelector方法。

索引.js
// ✅ Get the first element with classes `box` AND `green`
const elements2 = document.querySelector('.box.green');
console.log(elements2); // 👉️ div.box.green

获取至少具有多个类之一的元素

第三个示例使用querySelectorAll方法获取至少具有类box和之一的元素green。

索引.js
// ✅ Get all elements with at least one of classes `box` or `green`
const elements3 = document.querySelectorAll('.box, .green');
console.log(elements3); // 👉️ [div.box.green, div.box.green, div.box.orange]

querySelectorAll您可以根据需要将尽可能多的逗号分隔选择器传递给该方法。

获取具有一个类但没有另一个类的元素

您还可以选择具有其中一个类但不具有另一个类的元素。

索引.js
const elements4 = document.querySelectorAll(
  '.box:not(.orange)'
);
console.log(elements4); // 👉️ [div.box.green, div.box.green]

The example selects the elements that have a class of box but don’t have the
class of orange.

# Narrow the results down

You can also narrow the results down by adding a specific tag name to the
selector.

index.js
// ✅ Get all DIV elements with classes `box` AND `green`
const elements5 = document.querySelectorAll('div.box.green');
console.log(elements5); // 👉️ [div.box.green, div.box.green]

The example shows how to get all div elements that have both classes – box
and green.

This selector would not match any span or p elements that have the same
classes.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: