Vanilla Javascript：查找与给定其id的元素同名的数据属性

Question

是否可以在 DOM 中找到具有与元素 id 相同名称的 data 属性的元素？ （给数据属性赋予与 id 相同的值是不是一种不好的做法？）

示例语法：

HTML：

<li id="tab-1"></li>
<p data-tab="tab-1">Content 1</p>

想知道如何在 Vanilla Javascript 中实现这一点。谢谢☺

编辑：我希望编写我的代码，以便如果我有元素的 ID，如果我没有关闭它，我可以只查找相同值的数据属性我的头顶。

Answer 1

是的，你可以这样做。 以下是你的做法：

var usingId = document.querySelector('#tab-1');
var usingDt = document.querySelector('[data-tab="tab-1"]');
console.log(usingId);
console.log(usingDt);

<li id="tab-1">Tab</li>
<p data-tab="tab-1">P Tab</p>

这是一种不好的做法吗？。不是

Answer 2

如果您尝试使用来自不同元素的.id 字符串属性选择具有未知html5 data-* 属性的元素，您可以查询document 中的所有元素，检查.name 和@每个元素的.attributes 的987654327@，如果属性的.value 等于提供.id 的元素的.id 并且.attribute 属性的.name 不是"id"，则使用匹配的元素属性等于.querySelector()处的选择器

<li id="tab-1"></li>
<p data-tab="tab-1">Content 1</p>
<script>
let id = document.getElementById("tab-1").id;
for (let el of document.querySelectorAll("*")) {
  for (let {name, value} of el.attributes) {  
  if (value === id && name !== "id") {
     document.querySelector(`[${name}="${id}"]`)
     .style.color = "green";
     break;
  }
  }
}
</script>

Answer 3

如果需要不知道attribute 的名称，哪个值是您要查找的字符串，那么您可以创建一个XPath query，它将返回所有具有该值属性的元素：

//*[@*='value']

解压：

'//' + // from root to anywhere in the tree
   '*' + // any kind of node
     '[@*' + // with any attribute
         ' = "value"' // which value is 'value'
                      ']'

var valueToFind = 'find-me';
var query = document.evaluate(`//*[@*='${valueToFind}']`, document, null, XPathResult.ANY_TYPE, null);
var elements = [], el;
while(el = query.iterateNext()){
  // in your case you will filter it to not be the original node 
  // if(el !== original)
  elements.push(el);
  }
console.log(elements);

<div data-id="find-me"></div>
<div data-id="do-not-find-me"></div>
<div class="find-me"></div>
<div class="do-not-find-me"></div>
<div style="find-me"></div>
<div id="find-me"></div>

如果目标是只获取具有此类值的data-* 属性的元素，那么查询会更长一些：

//*[@*[starts-with(name(), 'data-')] = '${valueToFind}']

解压：

 '//' + // from root to anywhere in the tree
  '*' + // any kind of node
   '[@*' + // with any attribute
      '[starts-with(name(), "data-")]' + // which starts with "data-"
         ' = "value"' // and which value is 'value'
           ']'

var valueToFind = 'find-me';
var query = document.evaluate(`//*[@*[starts-with(name(), 'data-')] = '${valueToFind}']`, document, null, XPathResult.ANY_TYPE, null);
var elements = [], el;
  
while(el = query.iterateNext()){
  elements.push(el);
  }
console.log(elements);

<div data-id="find-me"></div>
<div data-foo="find-me"></div>
<div data-id="do-not-find-me"></div>
<div class="find-me"></div>
<div class="do-not-find-me"></div>
<div style="find-me"></div>
<div id="find-me"></div>