JavaScript 通过 data 属性获取所有元素

要通过数据属性获取所有 DOM 元素，请使用 querySelectorAll 方法，例如 document.querySelectorAll(‘[data-id]’) 。 querySelectorAll 方法返回一个 NodeList，其中包含与指定选择器匹配的元素。

这是此示例的 html 代码。

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"]`);

要根据特定属性值的部分匹配来选择元素，请向下滚动到下一个示例。

通过数据属性的部分匹配获取所有 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"]');

我们还可以在选择器前面加上您要匹配的特定类型的元素以缩小结果范围。

const elements1 = document.querySelectorAll(`div[data-id^="bo"]`);

该示例仅选择具有 data-id 属性集且属性值以 bo 开头的 div 元素。

火焰兔

海报 链接