具有边界条件的 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 与 boundary/inequality 选择器抛出错误。

jQuery 提供了执行此类操作的机制，尽管以牺牲性能为代价，这在处理移动设备时非常重要。

提取所有 data-kind 元素然后测试它们的 kind 数据的边界条件是一件微不足道的事情，但我想知道...... - 也许有一种方法可以写一个我不知道的 querySelectorAll 的巧妙查询？

Answer 1

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

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

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

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

具有边界条件的 querySelectorAll

querySelectorAll with boundary conditions

javascript

api

dom

selectors-api