Javascript es6查询选择一个类并获取它'；s数据属性

我一直在尝试编写一个函数，在这个元素中获取类

<li class="list-group-item" data-id="1023649435">

} }

您可以使用Document#querySelector/All在查询中使用括号按data-*属性查找元素：

document.querySelector('[data-id="1023649435"]');

演示：

const el=document.querySelector（“[data id=“1023649435”]”）；
el.classList.add（'modify-margin'）
。修改边距{
颜色：红色；
}

演示
您可以使用Document#querySelector/All在查询中使用括号按data-*属性查找元素：

document.querySelector('[data-id="1023649435"]');

演示：


const el=document.querySelector（“[data id=“1023649435”]”）；
el.classList.add（'modify-margin'）
。修改边距{
颜色：红色；
}

演示

当然，您可以使用
querySelector/All
重写下面的代码段

我所做的只是简单地选择所有具有“list group item”类名的项，仅当它们具有
数据id
属性且该属性为正数时，才过滤要保留的项，然后处理它们


Array.from（document.getElementsByClassName（“列表组项”））
.filter（e=>parseInt（e.dataset.id）>0）
.forEach（f=>console.log（f.innerText））；
/*
[].slice.call（document.getElementsByClassName（“列表组项”））.filter（e=>parseInt（e.dataset.id）>0.forEach（f=>console.log（f.innerText））；
*/
/*
---或者根据您的评论-）
Array.from（document.getElementsByClassName（“列表组项”））
.filter（e=>e.dataset.id.startsWith（“1023”））
.forEach（f=>console.log（f.innerText））；
*/
七个
11月

17

revolution

当然，您可以使用
querySelector/All
重写下面的代码段

我所做的只是简单地选择所有具有“list group item”类名的项，仅当它们具有
数据id
属性且该属性为正数时，才过滤要保留的项，然后处理它们


Array.from（document.getElementsByClassName（“列表组项”））
.filter（e=>parseInt（e.dataset.id）>0）
.forEach（f=>console.log（f.innerText））；
/*
[].slice.call（document.getElementsByClassName（“列表组项”））.filter（e=>parseInt（e.dataset.id）>0.forEach（f=>console.log（f.innerText））；
*/
/*
---或者根据您的评论-）
Array.from（document.getElementsByClassName（“列表组项”））
.filter（e=>e.dataset.id.startsWith（“1023”））
.forEach（f=>console.log（f.innerText））；
*/
七个
11月

17

revolution

elems是节点列表-

elems

是节点列表-谢谢，这非常有用。我还有一个曲线球，数据id是从1023开始的…但在那之后，数字会改变。我是否可以使用operate为任何以这些数字开头的数据id选择前几个数字？@sthig然后选择如下选择器：

document.querySelector（“[data id^=“1023”]”）谢谢，这非常有帮助。我还有一个曲线球，数据id是从1023开始的…但在那之后，数字会改变。我是否可以使用operate为任何以这些数字开头的数据id选择前几个数字？@sthig然后选择如下选择器：
document.querySelector（“[data id^=“1023”]”）