用于属性名称模式的 JavaScript/CSS 选择器

Question

假设我有以下标记

<div data-common-notcommon="anyValue">
    <!-- Whatever.. -->
</div>

<div data-common-not-commonerthing="anyValue">
    <!-- Whatever.. -->
</div>

我正在尝试编写一个 JS 选择器(或 CSS 选择器，不关心区别..)来根据通用的部分属性名称查找属性。

I.E 我想找到所有以 data-common 开头的元素。

我在 Google 上找不到关于属性名称选择器的任何内容，而是我真的不想做的属性值选择器。

<script>
  document.querySelectorAll('[data-common]'); // []
  document.querySelectorAll('[data-common*]'); // []
  // etc..
</script>

Answer 1

目前没有定义部分匹配属性名称的选择器。您要查询的内容不存在。

对于 JavaScript，您可以使用自定义代码过滤元素集合(jQuery 就是这样做的)，但它不适用于 document.querySelectorAll，您也不能为 CSS 定义自定义选择器，除非您愿意在 w3c 邮件列表中推荐它并处理导航涉及更改 CSS 语言的复杂工作流程。