为什么我不能使用纯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';
}

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

 Uncaught TypeError: Cannot set property 'display' of undefined

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

Answer 1

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

<TextNode textContent=" \n">

请改用nextElementSibling 。

来自MDN：Node.nextSibling

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