查询选择器选择以"data-"开头的属性

Question

这是一个简单的疑问，我的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，但这是不可能的，有什么方法可以做到吗？谢谢

Answer 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>