Javascript 如何使DOMContentLoaded选择所有特定的div元素？

我有一个项目，访问者将需要访问小弹出窗口来访问内容。但这只是一天一次

我已经设法成为脚本的一部分，但是这个jQuery只选择第一个div元素。如何选择所有特定的div元素

document.addEventListener（“DOMContentLoaded”，function（））{
var vlz=document.getElementById（“vlz”）；
var ls=localStorage.getItem（“vlz”）；
var数据=新日期（）；
var data_atual=data.valueOf（）；
var data24=data.setSeconds（data.getSeconds（）+5）；
if（ls<数据量）{
vlz.style.display=“块”；
document.getElementById（“clz”）.onclick=function（）{
setItem（“vlz”，data24）；
vlz.style.display=“无”；
}
}
});
。选择{
填充：10px；
背景：#eee；
利润率：10px
}
#vlz{
显示：无；
宽度：250px；
高度：50px；
背景:#555；
}

显示
舒适
显示
舒适
显示
舒适
首先，您应该使用类而不是ID。我建议您在将id更改为class后使用querySelectorAll

document.querySelectorAll（'.vlz'）
您不应该有多个id相同的
div
，您可以使用
类。
使用
querySelector
和
querySelectorAll
在javascript中选择元素有更新的方法

当您使用类选择器选择元素时，需要遍历它们并单独添加事件侦听器

这是一张工作票


document.addEventListener（“DOMContentLoaded”，function（））{
var vlz=document.queryselectoral（“.vlz”）；
var ls=localStorage.getItem（“vlz”）；
var数据=新日期（）；
var data_atual=data.valueOf（）；
var data24=data.setSeconds（data.getSeconds（）+5）；
if（ls<数据量）{
vlz.forEach（v=>{
v、 classList.add（'showvlz'）
})
}
document.querySelectorAll（“.clz”）.forEach（c=>{
c、 addEventListener（'click'，函数（事件）{
//在这里做事
event.target.parentNode.classList.add（'removevlz'）；
})
})
});
。选择{
填充：10px；
背景：#eee；
利润率：10px
}
.vlz{
显示：无；
宽度：250px；
高度：50px；
背景:#555；
}
.showvlz{
显示：块；
}
removevlz先生{
显示：无；
}

显示
舒适
显示
舒适
显示
舒适
您多次使用相同的ID，但ID必须是唯一的。更好地使用类。我添加了'localStorage.setItem（“vlz”，data24）；'显示仅在24小时内查看内容的选项。非常感谢你！