Javascript：找到一个ID对应的HTML属性

Question

只使用JavaScript，没有使用JQuery等，给定一个Id如何找到对应的数据属性？

例子

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

输入： "id-test"

Output： "data-qa-test"

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

相关问题：

Javascript：Select HTML 页面上的所有 data-qa 属性

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

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

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