Javascript: sélectionnez tous les attributs data-qa sur la page HTML

Question

En utilisant uniquement JavaScript, sans l'utilisation de JQuery, etc., quel est le moyen le plus efficace de sélectionner tous les noms d'attributs qui ont un certain attribut de données (disons 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>

Le résultat attendu doit être la liste:

apple
book
car

Cette question obtient les éléments parents, je veux les attributs eux-mêmes. Sélectionnez tous les éléments avec l'attribut "data-" sans utiliser jQuery

Ressources:

Élément de recherche Selenium via l'attribut Data-Qa

Attribut Data-QA: Une meilleure façon de sélectionner des éléments pour l'automatisation des tests d'interface utilisateur

Answer 1

Le code ci-dessous fonctionne en récupérant tous les éléments à l'aide de document.querySelectorAll, en mappant les éléments aux valeurs des attributs de données, puis en filtrant ceux qui sont faux 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

Pour référence, ci-dessous est essentiellement la fonctionnalité javascript vanille de base nécessaire ...

L' utilisation querySelectorAll, querySelectoret getElementByIdsi vous commencer.

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