如何使用 querySelectorAll 在 JavaScript 中选择数据属性

在 JavaScript 中，querySelectorAll 是一种常用的方法，可以从文档中选择元素。该方法返回一个 NodeList 对象，其中包含满足指定 CSS 选择器的所有元素。它还可以用于选择具有特定数据属性的元素。

选择具有特定数据属性的元素

数据属性使您能够将自定义数据存储在 HTML 元素中，这些数据可以与 JavaScript 一起使用。为了选择具有特定数据属性的元素，您可以使用 [data-*] CSS 选择器。该选择器可以使用元素的数据属性名称和值来选择元素。例如，使用以下 CSS 选择器可以选择具有 data-id 属性值为 123 的所有元素：

[data-id="123"] {
  /* CSS rules here */
}

使用 querySelectorAll 选择具有数据属性的元素

要使用 querySelectorAll 选择具有特定数据属性的元素，您可以将 CSS 选择器作为参数传递给该方法。例如，如果您想要选择具有 data-id 属性值为 123 的所有元素，您可以使用以下 JavaScript 代码：

const elements = document.querySelectorAll('[data-id="123"]');

该代码将选择具有 data-id 属性值为 123 的所有元素，并将它们存储在 elements 变量中。您可以遍历 elements 变量以访问每个选择的元素。

结论

使用 querySelectorAll 选择具有特定数据属性的元素非常简单，只需将 CSS 选择器作为参数传递给该方法即可。这使得在 JavaScript 中使用数据属性变得更加容易，并可以帮助您更有效地操作和处理文档中的元素。