Javascript: Wählen Sie alle Daten-Qa-Attribute auf der HTML-Seite aus

Question

Wenn Sie nur JavaScript verwenden, ohne JQuery usw. zu verwenden, ist dies die effizienteste Methode, um alle Attributnamen auszuwählen, die ein bestimmtes Datenattribut haben (sagen wir 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>

Das erwartete Ergebnis sollte folgende Liste sein:

apple
book
car

Diese Frage bekommt die übergeordneten Elemente, ich möchte die Attribute selbst. Wählen Sie alle Elemente mit dem Attribut "data-" aus, ohne jQuery zu verwenden

Ressourcen:

Selen-Find-Element über das Data-Qa-Attribut

Daten-QS-Attribut: Eine bessere Möglichkeit, Elemente für die Automatisierung von UI-Tests auszuwählen

Answer 1

Der folgende Code funktioniert, indem alle Elemente verwendet werden document.querySelectorAll, die Elemente den Werten der Datenattribute zugeordnet werden und dann diejenigen herausgefiltert werden, die falsch oder falsch sind '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

Im Folgenden wird im Wesentlichen die Kernfunktionalität von Vanille-Javascript aufgeführt, die benötigt wird ...

Mit querySelectorAll, querySelectorund getElementByIdsollten Sie loslegen.

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