javascript - 文档 querySelectorAll 查找元素属性名称的一部分？

<分区>

我尝试使用 ARIA 选择页面上的所有元素属性以检查页面是否错误使用了它们。众所周知，该属性以 aria-[NAME] 开头。

因为我不能使用 regex带有元素选择器，以及 css selectors没有给我通配符选择属性名称的选项(或者是吗？)，我想知道我该怎么做？

简单测试页:

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div>
<div class="text">
  <label id="tp1-label" for="first">First Name:</label>
  <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
  <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is optional</div>
</div>

<script>
let elAria1 = document.querySelectorAll('[aria-*]'); // this doesn't work
let elAria2 = document.querySelectorAll('[aria-'*]); // this doesn't work either
let elAria3 = document.querySelectorAll([aria-*]); // this doesn't work too
</script>

最佳答案

是的，除非您已经有了需要查找的属性名称列表，否则无法使用查询字符串来筛选您想要的属性名称。您必须通过检查元素的任何属性是否以 aria 开头来以编程方式进行更多操作:

const ariaElements = [...document.querySelectorAll('*')]
  .filter(elm => [...elm.attributes].some(
    ({ name }) => name.startsWith('aria-')
  ));
console.log(ariaElements);

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div>
<div class="text">
  <label id="tp1-label" for="first">First Name:</label>
  <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
  <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is optional</div>
</div>

关于javascript - 文档 querySelectorAll 查找元素属性名称的一部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58793425/

上一篇：javascript - Redux thunk - 嵌套调度函数/ Action

下一篇：javascript - 为什么我在 React 中收到无效的 Hook 调用？

相关文章：

Javascript 在文本区域中设置 unicode

javascript - Ember 每个循环加倍。使用内部每个循环变量的值绑定(bind)到外部每个循环的变量中名称相同的属性

javascript - Electron - 选择器 :first-child and :nth-child

javascript - CSS :before/:after Selectors in IE 6, 7

javascript - 我如何与空变量进行比较？

javascript - 如何在 Highcharts 中设置轴的最小上限？

jquery - 使用 jQuery 将选择器分组为一类

css - 使用 CSS3 选择除按钮之外的每个表单元素

python - 使用 Selenium 在 Instagram 的搜索栏中输入内容

JavaScript:新日期(Date.parse ("A 49"))