javascript - Javascript：选择 HTML 页面上的所有 data-qa 属性

Question

仅使用 JavaScript，不使用 JQuery 等，选择具有特定数据属性的所有属性名称的最有效方法是什么（比如说 data-qa）。

<p data-foo="0"></p><br/><h6 data-qa="apple"></h6>
<p data-foo="0"></p><br/><h6 data-qa="book"></h6>
<p data-foo="0"></p><br/><h6 data-qa="car"></h6>

预期结果应该是列表：

apple
book
car

这个问题得到了父元素，我想要属性本身。在不使用 jQuery 的情况下选择具有“data-”属性的所有元素

资源：

Selenium 通过 Data-Qa 属性查找元素

Data-QA 属性：为 UI 测试自动化选择元素的更好方法

标签： javascripthtmldom

Answer 1

下面的代码通过使用 获取所有元素document.querySelectorAll，将元素映射到数据属性的值，然后过滤掉虚假或'0'.

let getAllDataAttrs = name => Array.from(
    document.querySelectorAll(`[data-${name}]`)
  ).map(elem => elem.getAttribute(`data-${name}`))
  .filter(val => val && val !== '0');

console.log(getAllDataAttrs('foo'));

<p data-foo="0"></p><br/>
<h6 data-foo="apple"></h6>
<p data-foo="0"></p><br/>
<h6 data-foo="book"></h6>
<p data-foo="0"></p><br/>
<h6 data-foo="car"></h6>