Javascript: seleccione todos los atributos data-qa en la página HTML

Question

Usando solo JavaScript, sin el uso de JQuery, etc., cuál es la forma más eficiente de seleccionar todos los nombres de atributos que tienen un determinado atributo de datos (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>

El resultado esperado debe ser una lista:

apple
book
car

Esta pregunta obtiene los elementos principales, quiero los atributos en sí. Seleccione todos los elementos con el atributo "data-" sin usar jQuery

Recursos:

Elemento de búsqueda de selenio a través del atributo Data-Qa

Atributo Data-QA: una mejor manera de seleccionar elementos para la automatización de pruebas de IU

Answer 1

El siguiente código funciona obteniendo todos los elementos usando document.querySelectorAll, mapeando los elementos a los valores de los atributos de datos y luego filtrando los que son falsos o '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

Como referencia, a continuación se muestra esencialmente la funcionalidad básica de JavaScript básica necesaria ...

Usando querySelectorAll, querySelectory getElementByIddebería ayudarlo a comenzar.

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