Javascript: selecione todos os atributos data-qa na página HTML

Question

Usando apenas JavaScript, sem o uso de JQuery etc, qual é a forma mais eficiente de selecionar todos os nomes de atributos que possuem um determinado atributo de dados (digamos 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>

O resultado esperado deve ser a lista:

apple
book
car

Esta questão pega os elementos pais, eu quero os próprios atributos. Selecione todos os elementos com o atributo "data-" sem usar jQuery

Recursos:

Elemento de localização do selênio por meio do atributo Data-Qa

Atributo Data-QA: A melhor maneira de selecionar elementos para automação de teste de IU

Answer 1

O código abaixo funciona obtendo todos os elementos usando document.querySelectorAll, mapeando os elementos para os valores dos atributos de dados e, em seguida, filtrando aqueles que são falsos ou '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>

Answer 2

Para referência, abaixo está essencialmente a funcionalidade básica de javascript vanilla necessária ...

Usando querySelectorAll, querySelectore getElementByIddeve começar.

// get "data-qa" value by "id"
var data = document.getElementById('id-test2').getAttribute('data-qa');
console.log(data);

// get "id" value by "data-qa"
var data = document.querySelector('[data-qa="data-qa-test2"]').id;
console.log(data);

// get all elements with attribute "data-qa"
var elems = document.querySelectorAll('[data-qa]');

// get all "ids"
var data = [];
elems.forEach(function(elem){
  data.push(elem.id);
});
console.log(data);

// get all "data-qa"
var data = [];
elems.forEach(function(elem){
  data.push(elem.getAttribute('data-qa'));
});
console.log(data);

<div id="id-test" data-qa="data-qa-test"></div>
<div id="id-test1" data-qa="data-qa-test1"></div>
<div id="id-test2" data-qa="data-qa-test2"></div>
<div id="id-test3" data-qa="data-qa-test3"></div>