具有边界条件的querySelectorAll

Question

document.querySelectorAll可用于定位具有特定数据属性值的文档元素。例如

​

alert(document.querySelectorAll(".dk[data-kind='3']").length);
alert(document.querySelectorAll(".dk[data-kind>'3']").length);

<div class='dk' data-kind='2'>A</div>
<div class='dk' data-kind='3'>B</div>
<div class='dk' data-kind='4'>C</div>

​

但是，据我所知，不可能定义使用诸如data-kind>"3"之类的不平等的选择器--在这里运行代码片段并尝试使用边界/不等式选择器的querySelectorAll会抛出一个错误。

jQuery提供了做这些事情的机制，尽管牺牲了在处理移动设备时相当重要的性能。

提取所有data-kind元素，然后根据边界条件测试它们的kind数据是一件很简单的事情，但我想知道……-也许有一种方法可以为querySelectorAll编写一个我不知道的聪明的查询？

Answer 1

您可以使用querySelectorAll获取所有具有data-kind属性的元素。以及满足一定条件的滤波元件。

Array.from(document.querySelectorAll(".dk[data-kind]"))

此语句将选择具有dk类和data-kind属性的所有元素。Array.from将将集合转换为Array，以便可以直接在其上使用数组函数。

.filter(el => Number(el.dataset.kind) > 3)

此过滤器将过滤data-kind属性值大于3的元素。

​

var els = Array.from(document.querySelectorAll(".dk[data-kind]")).filter(el => Number(el.dataset.kind) > 3);
console.log(els);
console.log(els.length);

<div class='dk' data-kind='2'>A</div>
<div class='dk' data-kind='3'>B</div>
<div class='dk' data-kind='4'>C</div>

​