Javascript: เลือกแอตทริบิวต์ data-qa ทั้งหมดบนหน้า HTML

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

คำถามนี้ได้รับองค์ประกอบหลักฉันต้องการแอตทริบิวต์เอง เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ "data-" โดยไม่ต้องใช้ jQuery

แหล่งข้อมูล:

ซีลีเนียมค้นหาองค์ประกอบผ่านแอตทริบิวต์ Data-Qa

Data-QA Attribute: วิธีที่ดีกว่าในการเลือกองค์ประกอบสำหรับการทดสอบ UI อัตโนมัติ

Answer 1

รหัสด้านล่างทำงานโดยได้รับทั้งหมดขององค์ประกอบที่ใช้document.querySelectorAllทำแผนที่องค์ประกอบที่จะค่าของคุณลักษณะข้อมูลและจากนั้นกรองคนที่มี falsy '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

สำหรับการอ้างอิงด้านล่างนี้เป็นฟังก์ชันหลักของ vanilla javascript ที่จำเป็น ...

การใช้querySelectorAll, querySelectorและgetElementByIdควรจะได้รับคุณเริ่มต้น

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