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

我有两个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元素.我做错了什么？

解决方法:

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

<TextNode textContent=" \n">

请改用nextElementSibling.

从MDN: Node.nextSibling

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get.

标签：javascript,html,closest,nextsibling
来源： https://codeday.me/bug/20190623/1272261.html