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

时间:2019-11-10 22:12:28

标签: javascript css-selectors

我尝试选择页面上具有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>

1 个答案:

答案 0 :(得分:1)

对,除非您已经有了需要查找的属性名称的列表,否则无法使用查询字符串来过滤所需属性。通过检查元素的任何属性是否以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>