首页 > 解决方案 > 在纯 JavaScript 中选择没有任何数据属性的元素

问题描述

我有一个列表,我想选择没有任何数据属性的第一个列表元素“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-*])');

这不起作用

标签: javascript

解决方案


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)

推荐阅读