Javascript：查找 ID 对应的 HTML 属性答案

【问题标题】：Javascript: Find Corresponding HTML Attribute for an IDJavascript：查找 ID 对应的 HTML 属性
【发布时间】：2021-01-24 20:53:00
【问题描述】：

仅使用 JavaScript，不使用 JQuery 等，如何找到给定 Id 的相应数据属性？

例子

<div id="id-test" data-qa="data-qa-test">
</div>

输入： "id-test"

输出： "data-qa-test"

在 Javascript 中有没有办法获取下面的代码，并找到相应的 data-qa 自动化标签定位器？

背景：尝试用我们的数据 qa 属性替换 Selenium ID 定位器。

【问题讨论】：

给定一个id，使用这个id。 ID 不能重复。如果您的标记重复 id，则根据网络标准它是无效的，应该修复。

标签： javascript html selenium dom

【解决方案1】：

使用 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);

// get all "ids" and "data-qa"
var data = [];
elems.forEach(function(elem){
  data.push({
    "id": elem.id,
    "qa": elem.getAttribute('data-qa')
  });
});
console.log(data);

// get all "ids" and "data-qa" with "id" as key
var data = {};
elems.forEach(function(elem){
  data[elem.id] = {
    "id": elem.id,
    "qa": 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>

【讨论】：

您是否能够编写代码来拥有一个 Array Pair 类，ID 及其对应的 Data-QA 属性？谢谢

【解决方案2】：

这是你的意思吗，这个问题有点混乱。

const ids = ["id-test","id-test1","id-test2","id-test3"];

const getData = (id) => document.querySelector(`#${id}`).dataset.qa;

const values = ids.map(id => getData(id));

console.log(values);

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

【讨论】：

我其实是在找data-qa，所以Input是Id，Output是data-qa
然后代码工作，看看控制台输出。函数getData(id) 是你需要的sn-p。