为什么我 select 下一个 DIV 兄弟姐妹不能使用纯 JavaScript？

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';
}

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

 Uncaught TypeError: Cannot set property 'display' of undefined

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

Answer 1

nextSibling returns 本例中的文本节点：

<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.

为什么我 select 下一个 DIV 兄弟姐妹不能使用纯 JavaScript？

Why cannot I select the next DIV sibling using pure JavaScript?

html

javascript

closest

nextsibling