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

【问题标题】：Why cannot I select the next DIV sibling using pure JavaScript?为什么我不能使用纯 JavaScript 选择下一个 DIV 兄弟？
【发布时间】：2015-12-19 15:02:57
【问题描述】：

我有两个 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 返回一个文本节点（您可以使用 nextElementSibling 来确保返回下一个元素）。文本节点没有style 属性，所以nextSibling.style.display 失败。
因为div之间有空格
.closest() 是一个 jQuery 函数。它返回一个 jQuery 对象，而不是一个 DOM 元素。
我不明白你是怎么走到这一步的。 element 是一个 DOM 元素，而不是 jQuery 对象，所以 element.closest() 应该抱怨试图调用非函数。如果你想在纯 JS 中做到这一点，为什么要混入 jQuery？
@Barmar developer.mozilla.org/en-US/docs/Web/API/Element/closest

标签： javascript html closest nextsibling

【解决方案1】：

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

<TextNode textContent=" \n">

请改用nextElementSibling。

来自MDN: Node.nextSibling

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

【讨论】：