Javascript: Chọn tất cả các thuộc tính data-qa trên Trang HTML

Question

Chỉ sử dụng JavaScript, không sử dụng JQuery, v.v., cách hiệu quả nhất để chọn tất cả các tên thuộc tính có một thuộc tính dữ liệu nhất định (giả sử 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>

Kết quả mong đợi nên được liệt kê:

apple
book
car

Câu hỏi này nhận các phần tử cha, tôi muốn các thuộc tính chính nó. Chọn tất cả các phần tử có thuộc tính "data-" mà không cần sử dụng jQuery

Tài nguyên:

Selenium tìm phần tử thông qua thuộc tính Data-Qa

Thuộc tính Data-QA: Một cách tốt hơn để chọn các phần tử cho tự động hóa kiểm tra giao diện người dùng

Answer 1

Đoạn mã dưới đây hoạt động bằng cách sử dụng tất cả các phần tử document.querySelectorAll, ánh xạ các phần tử với giá trị của các thuộc tính dữ liệu, sau đó lọc ra những phần tử sai hoặc '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

Để tham khảo, dưới đây về cơ bản là chức năng javascript vani cốt lõi cần thiết ...

Sử dụng querySelectorAll, querySelectorvà getElementByIdnên giúp bạn bắt đầu.

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