我的场景中nextElementSibling是什么？如何解决相关TypeError报错？

nextElementSibling 是 W3C 制定的DOM标准中，Element 接口自带的原生属性，作用是获取当前元素在DOM树中紧随其后的同级元素节点，如果当前元素后面没有其他同级元素节点，该属性会返回null。

注意：该属性和nextSibling的差异是，nextSibling会返回所有类型的同级节点（包括文本节点、注释节点等），而nextElementSibling只会返回类型为Element的节点。

你遇到的Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement.报错，本质是你在代码中尝试读取一个null值的style属性，结合你使用nextElementSibling的场景，大概率是该属性返回了null，你直接链式访问了其style属性导致报错。
常见触发场景：

• 触发事件的按钮是其父容器内的最后一个子元素，后续没有同级元素，nextElementSibling返回null
• JS代码执行时机早于DOM加载完成时间，此时DOM树还没构建完成，无法获取到对应后续元素
• 对应后续元素被其他业务逻辑提前移除，调用nextElementSibling时元素已经不存在

你可以先通过非空判断规避报错，示例写法：

const targetBtn = document.querySelector('button') // 替换为你的按钮选择器
const nextEle = targetBtn.nextElementSibling
if (nextEle) {
  // 原有的style操作逻辑写在这里
  nextEle.style.display = 'block'
}

补充完整代码后可进一步定位具体问题。

内容的提问来源于stack exchange，提问作者Ashley