querySelector 选择以“data-”开头的属性 [重复]答案

【问题标题】：querySelector select attributes that starts with "data-" [duplicate]querySelector 选择以“data-”开头的属性 [重复]
【发布时间】：2021-01-13 02:25:30
【问题描述】：

这是一个简单的疑问，我的 HTML 中有许多以 data- 开头的属性：

<span data-something="some"></span>
<p data-some="some"></p>
<div data-a-thing="some"></div>
<a data-other-thing="some"></a>
<section data-some-attribute="some"></section>
<span data-asd="some"></span>
<p  data-some-invented-attribute="some"></p>

我想选择属性以data-*开头的所有标签，我想使用RegExp但不可能，有什么办法吗？谢谢！

【问题讨论】：

stackoverflow.com/questions/41623353/… 同样的问题

标签： javascript queryselector

【解决方案1】：

我认为没有任何方法可以使用单个选择器来选择动态属性。但是您可以选择所有元素并通过attributes 过滤那些以data 开头的元素：

console.log(
  [...document.querySelectorAll('*')]
    .filter(elm => [...elm.attributes].some(
      attrib => attrib.name.startsWith('data')
    ))
);

<span>don't select me</span>
<span data-something="some"></span>
<p data-some="some"></p>
<div data-a-thing="some"></div>
<a data-other-thing="some"></a>
<section data-some-attribute="some"></section>
<span data-asd="some"></span>
<p data-some-invented-attribute="some"></p>

另一种方法，使用dataset：

console.log(
  [...document.querySelectorAll('*')]
    .filter(elm => Object.keys(elm.dataset).length)
);

<span>don't select me</span>
<span data-something="some"></span>
<p data-some="some"></p>
<div data-a-thing="some"></div>
<a data-other-thing="some"></a>
<section data-some-attribute="some"></section>
<span data-asd="some"></span>
<p data-some-invented-attribute="some"></p>

【讨论】：

您对我的回答是正确的。删了。