Javascript 如何遍历foreach（）中的元素

我基本上是在尝试使用querySelectorAll循环通过我已经选择的链接，querySelectorAll在forEach方法中运行，该方法还循环通过一个框列表。 不幸的是，我仍然无法解决代码的第二部分（在链接节点列表中循环）。 代码的简单摘要如下所示：

const link=document.queryselectoral（'.link'））
const-box=document.queryselectoral（“.box”）
box.forEach（（单框）=>{
singleBox.addEventListener（“mouseenter”，（）=>{
link[].classList.add（'top'）；//我知道我需要在这里使用for循环来在链接节点列表之间循环，但我仍然无法找到方法：(
});
singleBox.addEventListener（“mouseleave”，（）=>{
链接[]。类列表。删除（“顶部”）；
});
})；

.box{
位置：相对位置；
宽度：30雷姆；
高度：25雷姆；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
过渡：所有1都放松；
}
.img支架{
背景：#fff；
宽度：18rem；
身高：18.8雷姆；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.链接{
位置：绝对位置；
宽度：200px；
高度：200px；
背景色：透明；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：-35；
}
.顶{
z指数：35；
光标：指针；
过渡：全部。5秒轻松；
背景颜色：红色；//更改背景颜色只是为了可视化正在发生的事情//
}

/*我循环通过的第一个框（使用foreach）*/
/*第一环节*/
/*我循环通过的第二个框（使用foreach）*/
/*第二环节*/

您可以在每个框中获得

.link

s，如下所示：

const-box=document.queryselectoral（'.box'）；
box.forEach（（单框）=>{
设boxLinks=singleBox.querySelectorAll（'.link'）；
singleBox.addEventListener（“mouseenter”，（）=>{
forEach（boxLink=>{
boxLink.classList.add（'top'）；
});
});
singleBox.addEventListener（“mouseleave”，（）=>{
forEach（boxLink=>{
boxLink.classList.remove（'top'）；
});
});
})；

.box{
位置：相对位置；
宽度：30雷姆；
高度：25雷姆；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
过渡：所有1都放松；
}
.img支架{
背景：#fff；
宽度：18rem；
身高：18.8雷姆；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.链接{
位置：绝对位置；
宽度：200px；
高度：200px；
背景色：透明；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：-35；
}
.顶{
z指数：35；
光标：指针；
过渡：全部。5秒轻松；
背景颜色：红色；//更改背景颜色只是为了可视化正在发生的事情//
}

/*我循环通过的第一个框（使用foreach）*/
/*第一环节*/
/*我循环通过的第二个框（使用foreach）*/
/*第二环节*/