Javascript nextElementSibling，但仅在div内

我正试图实现这个单词旋转应用程序。在登录页上。我遇到的问题是，

nextElementSibling

变量本身继续运行，传递我想要保存它的

div

容器。我已尝试编写说明并应用带有标志if可用的

if

语句

完整的代码可以在这里找到

setInterval（函数（）{
const show=document.querySelector（'span[数据显示]'））
const next=show.nextElementSibling | | document.querySelector（'span:first child'））
const up=document.querySelector（'span[data up]”）
如果（向上）{
up.removeAttribute（'data-up'））
}
show.removeAttribute（'data-show'））
show.setAttribute（'data-up'，''）
next.setAttribute（'data-show'，''）
}，2000）

：根目录{
--偏移量：6px；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
氢{
宽度：980px；
字体大小：100px；
字体系列：Helvetica；
线高：1.06；
字母间距：-0.02em；
颜色：#1d；
}
.面具{
高度：106px；
位置：相对位置；
溢出：隐藏；
保证金顶部：var（--抵销）；
}
.遮罩跨度{
显示：块；
框大小：边框框；
位置：绝对位置；
顶部：100px；
填充底部：var（--偏移）；
背景大小：100%100%；
-webkit背景剪辑：文本；
背景剪辑：文本；
-webkit文本填充颜色：透明；
背景重复：无重复；
}
.span掩码[数据显示]{
转换：translateY（-100%）；
转换：.5s转换易进易出；
}
.mask span[数据向上]{
转化：translateY（-200%）；
转换：.5s转换易进易出；
}
.面具跨度：第n个孩子（1）{
背景图像：线性梯度（45度，#0ecffe 50%，#07a6f1）；
}
.面具跨度：第n个孩子（2）{
背景图像：线性梯度（45度，#18e198 50%，#0ec15d）；
}
.面具跨度：第n个孩子（3）{
背景图像：线性梯度（45度，#8a7cfb 50%，#633e9c）；
}
.面具跨度：第n个孩子（4）{
背景图像：线性梯度（45度，#fa7671 50%，#f45f7f）；
}

把你的起居室变成
剧院。
健身房。
音乐厅。
拱廊。

我不确定我是否明白<如果元素没有下一个同级元素，则code>nextElementSibling将为

null

。它在父元素之外“继续”。这里的代码是否复制了您的问题？预期的行为是什么？由于“const next=show.nextElementSibling | | document.querySelector（'span:first child'）”，它循环，因为或规则是，如果它找不到nextElementSibling，它将继续处理span:first child。你可以在这里看到一个实时版本。如果您查看控制台，它超出了mask类并卡在我的导航栏上。是的，但这是由于

document.querySelector（'span:first child'）

，而不是

nextElementSibling

。您必须使用正确的选择器再次选择第一个掩码（例如，在您的示例中这里

。掩码span:first child

）。您在这里混合了兄弟姐妹和孩子的概念。这可能会让您感到困惑。使用这一行

const next=show.nextElementSibling | | | document.querySelector（'span:first child'）

如果show有一个同级，它将脱离容器，即使这可能不是您的意图。现在它的循环显示的是兄弟姐妹，而不是孩子。也许用nextElementChild代替