以 "data-" 开头的 querySelector select 属性

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>

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

Answer 1

我认为没有任何方法可以通过单个 selector 来 select 动态属性。但是您可以 select 所有元素并按 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>

以 "data-" 开头的 querySelector select 属性

querySelector select attributes that starts with "data-"

javascript

queryselector