如何查找特定类元素的下一个元素？不使用nextSibling及jQuery

你遇到的问题其实是nextSibling的特性导致的——它会返回所有类型的节点，包括空白文本节点（比如代码里的换行、空格），所以你看到的情况大概率是specificClass元素的nextSibling其实是一个空白文本节点，而不是你想要的<h3>。

不用遍历父容器，也不用jQuery的话，直接用nextElementSibling就可以完美解决这个问题，它专门用来获取当前元素的下一个元素节点，会自动跳过文本、注释这类非元素节点。

示例代码： #

<div>
  <div class="specificClass"></div>
  <h3>header</h3>
  <div></div>
</div>

<script>
  const targetElement = document.querySelector('.specificClass');
  const nextElement = targetElement.nextElementSibling;
  console.log(nextElement); // 会输出那个<h3>元素
</script>

补充说明： #

• 如果你的场景更复杂，比如要跳过多个元素直到找到某个特定类型的元素（比如不一定是紧接的下一个，但要找之后第一个<h3>），可以基于nextElementSibling做简单循环，但你当前需求是获取紧接的下一个元素，直接用这个属性就足够了。
• 这个属性是原生DOM API，所有现代浏览器都支持，兼容性非常好。

内容的提问来源于stack exchange，提问作者La_Concorde