我尝试选择具有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>
是的,除非您已经有了需要查找的属性名称的列表,否则无法使用查询字符串来过滤所需属性。您必须通过检查元素的任何属性是否以开头来以编程方式进行更多操作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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句