JavaScript 通过 data 属性获取所有元素
要通过数据属性获取所有 DOM 元素，请使用 querySelectorAll 方法，例如 document.querySelectorAll('[data-id]') 。 querySelectorAll 方法返回一个 NodeList，其中包含与指定选择器匹配的元素。
这是此示例的 html 代码。
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div data-id="box1">Box 1</div> <div data-id="box2">Box 2</div> <script src="index.js"></script> </body> </html>
这是相关的 JavaScript 代码。
index.js// ✅ Get all elements with `data-id` attribute const elements1 = document.querySelectorAll('[data-id]'); console.log(elements1); // 👉️ [div, div] // ✅ Get only DIV elements with `data-id` attribute const elements2 = document.querySelectorAll('div[data-id]'); console.log(elements2); // 👉️ [div, div] // ✅ Get only elements where data-id = box1 const elements3 = document.querySelectorAll(`[data-id="box1"]`); console.log(elements3); // 👉️ [div]
我们将不同的选择器传递给 document.querySelectorAll 方法以获取包含特定 DOM 元素的 NodeList。
请注意，querySelectorAll方法返回一个 NodeList，而不是一个数组。 如果您需要将响应转换为数组，请将其传递给Array.from方法。
const arr = Array.from(document.querySelectorAll('[data-id]'));
第一个示例展示了如何获取所有设置了 data-id 属性的 DOM 元素。
const elements1 = document.querySelectorAll('[data-id]');
在第二个示例中，我们将范围缩小到只有设置了 data-id 属性的 div 元素。
const elements2 = document.querySelectorAll('div[data-id]');
如果 DOM 包含任何设置了 data-id 属性的 span 或 p 元素，它们将不会包含在 querySelectorAll 方法的返回值中。
第三个示例选择 data-id 属性设置为 box1 的元素。
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
请注意，data-id属性必须准确设置为 box1。
要根据特定属性值的部分匹配来选择元素，请向下滚动到下一个示例。
通过数据属性的部分匹配获取所有 DOM 元素
要通过部分匹配数据属性来获取所有元素，请使用带有选择器的 querySelectorAll 方法，该选择器匹配值以特定字符串开头、结尾或包含特定字符串的数据属性。
// ✅ Get all where value of data-id starts with `bo`
const elements1 = document.querySelectorAll('[data-id^="bo"]');
console.log(elements1); // 👉️ [div, div]
// ✅ Get all where value of data-id ends with `ox1`
const elements2 = document.querySelectorAll('[data-id$="ox1"]');
console.log(elements2); // 👉️ [div]
// ✅ Get all where value of data-id contains with `box`
const elements3 = document.querySelectorAll('[data-id*="box"]');
console.log(elements3); // 👉️ [div, div]
第一个示例选择 data-id 属性值以 bo 开头的所有 DOM 元素。
const elements1 = document.querySelectorAll('[data-id^="bo"]');
我们可能熟悉插入符
^符号，它在正则表达式中使用时具有相同的含义。
第二个示例选择 data-id 属性值以 ox1 结尾的所有 DOM 元素。
const elements2 = document.querySelectorAll('[data-id$="ox1"]');
第三个示例选择所有 DOM 元素，其中 data-id 属性的值包含字符串框。
const elements3 = document.querySelectorAll('[data-id*="box"]');
为了满足条件，字符串框可以位于
data-id属性值的任何位置。
我们还可以在选择器前面加上您要匹配的特定类型的元素以缩小结果范围。
const elements1 = document.querySelectorAll(`div[data-id^="bo"]`);
该示例仅选择具有 data-id 属性集且属性值以 bo 开头的 div 元素。
相关文章
MySQL 修复 Data Is Truncated for a Column 错误
发布时间：2023/05/09 浏览次数：72 分类：MySQL
-
本文介绍 MySQL 错误 Data is truncated for a column 的可能原因和解决方法。修复数据因 MySQL 中的列错误而被截断
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
