选择以“数据xxx”开头的完整属性[已关闭]

Question

选择以data-xxx开头的完整属性，就像这个例子：data-a=xxxand data-b=zzzand data-c=aaa不像这个例子：class=xxxand style=zzzhttps://i.stack.imgur.com/TVtle.png

Answer 1

目前还不清楚目的是什么，但这可能是一个例子：

let listitems = document.querySelectorAll('li');

listitems.forEach(item => {
  [...item.attributes].forEach(attr => {
    if(attr.name.includes('data-')){
      let attrkey = attr.name.split('-')[1];
      console.log(attrkey, '-', attr.value);
    }
  });
});

<ul>
  <li data-id="0" data-selected="false">Item 1</li>
  <li data-id="1" class="test">Item 1</li>
  <li class="not-data-attr">Item 1</li>
</ul>

Answer 2

可以通过调用dataset来检索数据名称等语法的HTML数据属性。元素上的名称。下面是一个例子。

//getting the element
var element = document.getElementById('element');
//retriving its HTML dataattribute (new)
var value = element.dataset.new;
console.log(value)

<h1 id="element" data-new="foo"></h1>