Javascript 如何从节点列表中查找节点的索引

我正在尝试构建一个导航，

nav\uu link

显示用户当前使用

interSectionObserver

滚动时所处的区域

因此，我尝试从

部分arr

中控制台.log（）索引

entry.target

。这样我就可以查询选择所有

.nav_链接

，并将

活动

类添加到该

索引

编号中

我这样做是因为很容易将

nav_链接

作为添加类的目标，而不是在每个

nav_链接

和

部分

上添加单独的

id

或

类

我试着搜索这个，但找不到任何相关的东西。我认为，可以从

数组

中找到

元素

的索引，其中

元素

也是

数组

的成员

谢谢

const firstSection=document.querySelector（'.section--first'）；
const sectionArr=[…document.queryselectoral（'section'）；
const sideBarLinks=document.querySelectorAll（'.sidebar__-link'）；
让观察者=新的相交观察者（detectInterSection）；
观察者。观察（第一节）
函数检测器检测（条目）{
entries.forEach（entry=>{
console.log（entry.target）
//console.log（sectionArr.findIndex（entry.target））；//试图通过控制台记录sectioArr中entry.target的索引
})
}

*{
框大小：边框框；
}
*,
*：之前，
*：之后{
保证金：0；
填充：0；
}
* {
保证金：0；
填充：0；
}
*,
*：之前，
*：之后{
框大小：边框框；
}
ul，ol{
列表样式：无；
}
a{
文字装饰：无；
}
身体{
字体系列：“Nunito”，无衬线；
字体大小：16px；
线高：1.5；
颜色：#fff；
}
html{
溢出：滚动；
溢出x：隐藏；
}
：-webkit滚动条{
宽度：0px；
/*删除滚动条空间*/
背景：透明；
/*可选：只需使滚动条不可见*/
}
/*可选：以红色显示位置指示器*/
：-webkit滚动条拇指{
背景：#FF0000；
}
.标题{
填充：4REM0；
背景：#333；
}
.页脚{
背景：#333；
填充：30px0；
}
部分{
字体大小：24px；
背景#b78ee6；
高度：48vh；
填充：80px0；
}
部分：第n个子项（偶数）{
背景：#333e48；
高度：90vh；
}
.滚动包装器{
高度：100vh；
位置：固定；
显示器：flex；
对齐项目：居中；
右：0；
排名：0；
宽度：12px；
z指数：99；
光标：-webkit抓取；
}
.滚动包装器.滚动拇指包装器{
高度：100vh；
位置：相对位置；
宽度：100%；
}
.滚动包装器.滚动拇指{
宽度：16px；
背景:#666；
将改变：顶部；
位置：绝对位置；
左：0；
排名：0；
}
.十字路口{
位置：固定；
背景：#333；
宽度：300px；
右：32px；
排名：0；
填充：32px；
z指数：88；
边界半径：10px；
顶部：200px；
}
.a交叉口{
颜色：#fff；
}
.内容{
位置：相对位置；
}
.是活动的{
颜色：#b78ee6；
}

标题






第一次
第二副官
第三关
第四次
第五次会议
最后一刻
页脚

将函数作为参数来查找元素

const firstSection=document.querySelector（'.section--first'）；
const sectionArr=[…document.queryselectoral（'section'）；
const sideBarLinks=document.querySelectorAll（'.sidebar__-link'）；
让观察者=新的相交观察者（detectInterSection）；
观察者。观察（第一节）
函数检测器检测（条目）{
entries.forEach（entry=>{
const targetSectionIndex=sectionArr.findIndex（section=>entry.target.id===section.id）；
console.log（'targetSectionIndex'，targetSectionIndex）；
const targetSection=sectionArr[targetSectionIndex]；
console.log（'targetSection'，targetSection）；
})
}

*{
框大小：边框框；
}
*,
*：之前，
*：之后{
保证金：0；
填充：0；
}
* {
保证金：0；
填充：0；
}
*,
*：之前，
*：之后{
框大小：边框框；
}
ul，ol{
列表样式：无；
}
a{
文字装饰：无；
}
身体{
字体系列：“Nunito”，无衬线；
字体大小：16px；
线高：1.5；
颜色：#fff；
}
html{
溢出：滚动；
溢出x：隐藏；
}
：-webkit滚动条{
宽度：0px；
/*删除滚动条空间*/
背景：透明；
/*可选：只需使滚动条不可见*/
}
/*可选：以红色显示位置指示器*/
：-webkit滚动条拇指{
背景：#FF0000；
}
.标题{
填充：4REM0；
背景：#333；
}
.页脚{
背景：#333；
填充：30px0；
}
部分{
字体大小：24px；
背景#b78ee6；
高度：48vh；
填充：80px0；
}
部分：第n个子项（偶数）{
背景：#333e48；
高度：90vh；
}
.滚动包装器{
高度：100vh；
位置：固定；
显示器：flex；
对齐项目：居中；
右：0；
排名：0；
宽度：12px；
z指数：99；
光标：-webkit抓取；
}
.滚动包装器.滚动拇指包装器{
高度：100vh；
位置：相对位置；
宽度：100%；
}
.滚动包装器.滚动拇指{
宽度：16px；
背景:#666；
将改变：顶部；
位置：绝对位置；
左：0；
排名：0；
}
.十字路口{
位置：固定；
背景：#333；
宽度：300px；
右：32px；
排名：0；
填充：32px；
z指数：88；
边界半径：10px；
顶部：200px；
}
.a交叉口{
颜色：#fff；
}
.内容{
位置：相对位置；
}
.是活动的{
颜色：#b78ee6；
}

标题