javascript - 为什么我不能使用纯 JavaScript 选择下一个 DIV 兄弟？

Question

我div在第一个 div 中有两个带有一个按钮的元素，如下所示。

<div class='my-class'>
    <div class='other-div'>
       <button onClick="nextDiv(this);">Click</button>
    </div> 
</div> 
<div class='my-class'>
</div>

下面是我的 JavaScript 代码。

function nextDiv(element) {
      element.closest('.my-class').style.display = 'none';
      element.closest('.my-class').nextSibling.style.display = 'block';
}

当我点击按钮时，为什么我可以隐藏第一个元素但不能显示带有 class 的下一个 div 元素my-class。相反，我收到以下错误：

 Uncaught TypeError: Cannot set property 'display' of undefined

似乎我无法my-class使用 nextSibling 属性选择类的下一个 div 元素。我做错了什么？

Answer 1

nextSibling在这种情况下返回一个文本节点：

<TextNode textContent=" \n">

改为使用nextElementSibling。

来自MDN：Node.nextSibling

基于 Gecko 的浏览器将文本节点插入到文档中以表示源标记中的空白。因此，例如，使用 Node.firstChild 或 Node.previousSibling 获得的节点可能指的是空白文本节点，而不是作者打算获得的实际元素。