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

Question

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

由于我不能将正则表达式与元素选择器一起使用，并且css 选择器没有给我通配符选择属性名称的选项（或者是吗？），我想知道我该怎么做？

简单的测试页面：

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

Answer 1

是的，除非您已经有了需要查找的属性名称列表，否则无法使用查询字符串来过滤您想要的属性名称。您必须以编程方式执行此操作，方法是检查元素的任何属性是否以 开头aria：const ariaElements = [...document.querySelectorAll('*')]&nbsp; .filter(elm => [...elm.attributes].some(&nbsp; &nbsp; ({ name }) => name.startsWith('aria-')&nbsp; ));console.log(ariaElements);<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div><div class="text">&nbsp; <label id="tp1-label" for="first">First Name:</label>&nbsp; <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />&nbsp; <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is optional</div></div>