javascript - 在纯 JavaScript 中选择没有任何数据属性的元素

Question

我有一个列表，我想选择第一个列表元素“li”，没有任何数据属性

<ul>
    <li data-row="down"><a class="scroll" href="#home">home</a></li>
    <li data-space="down"><a class="scroll" href="#home">home</a></li>
    <li data-direction="down"><a class="scroll" href="#about">about</a></li>
    <li><a class="scroll" href="#team">team</a></li>
    <li><a class="scroll" href="#service">service</a></li>
    <li><a class="scroll" href="#portfolio">portfolio</a></li>
    <li data-direction="down"><a class="scroll" href="#blog">blog</a></li>
</ul>

我知道如何取消选择特定数据属性

document.querySelector('li:not([data-direction])');

但我需要更通用的东西

document.querySelector('li:not([data-*])');

这不起作用

Answer 1

const getAllElements = selector => Array.from(document.querySelectorAll(selector)
const isDataAttribute = attr => attr.startsWith('data-')
const hasDataAttribute = el =>
  Array.from(el.attributes)
    .every(isDataAttribute) 

getAllElements('li')
  .filter(hasDataAttribute)