在 JavaScript 中使用 querySelectorAll 的多个条件

使用 querySelectorAll 的多个条件

Use multiple conditions with querySelectorAll in JavaScript

要在该方法中使用多个条件querySelectorAll，请将多个以逗号分隔的选择器传递给该方法。

该方法将返回一个NodeList包含与指定选择器组匹配的元素的。

这是示例的 HTML。

索引.html


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

  <body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <span class="box3">Box 3</span>
    <p class="box4">Box 4</p>
    <span id="box5">Box 5</span>

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

这是相关的 JavaScript 代码。

索引.js


const elements1 = document.querySelectorAll('div.box1, span.box3');
console.log(elements1); // 👉️ [div.box1, span.box3]

const elements2 = document.querySelectorAll('div, span, p');
console.log(elements2); // 👉️ [div.box1, div.box2, span.box3, p.box4]

const elements3 = document.querySelectorAll('div.box1, span#box5');
console.log(elements3); // 👉️ [div.box1, span#box5]

我们将多个不相关的选择器传递给了
document.querySelectorAll方法。

该方法将一个或多个选择器作为参数。

请注意，传递多个选择器时，必须使用逗号分隔它们。

第一个示例选择所有div类为的元素和类为的box1所有
元素。spanbox3

索引.js


const elements1 = document.querySelectorAll('div.box1, span.box3');

第二个示例选择所有div,span和p元素并在同一NodeList.

索引.js


const elements2 = document.querySelectorAll('div, span, p');

第三个示例选择所有div类为的元素box1和一个span
id 为的元素box5。

索引.js


const elements3 = document.querySelectorAll('div.box1, span#box5');

请注意，该querySelectorAll方法返回一个NodeList，而不是一个数组。这意味着您不能使用数组数据类型实现的大部分方法。

如果要将结果转换为数组，请使用该Array.from()方法。

索引.js


const elements1 = Array.from(document.querySelectorAll('div.box1, span.box3'));
console.log(elements1); // 👉️ [div.box1, span.box3]

转换为数组后NodeList，您可以使用 JavaScript 中任何支持数组的方法。

下面是一个使用该Array.forEach方法迭代 DOM 元素数组的示例。

索引.js


const elements1 = Array.from(document.querySelectorAll('div.box1, span.box3'));
console.log(elements1); // 👉️ [div.box1, span.box3]

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

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：