Question

是否有可能在DOM中找到具有与元素相同名称的数据属性的元素？（给数据属性赋予与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

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

//*[@*='value']

解开包装：

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果目标是仅使用具有此类值的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'
           ']'

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您尝试使用其他元素中的html5字符串属性选择具有未知data-* .id属性的元素，则可以查询document中的所有元素，检查每个元素.name的{{1}}和.value，如果属性的.attributes等于提供.value的元素的.id， .id属性的.name不是.attribute，使用"id"处的属性等于选择器匹配该元素

.querySelector()

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

3 个答案: