关于NextSibling属性与getElementsByClassName()的使用疑问求解

这其实是DOM节点操作里一个很常见的小误区，我来给你拆解得明明白白：

1. nextSibling的本质：不只是找HTML元素 #

nextSibling属性的作用是返回当前节点的下一个兄弟节点，但这里的「节点」范围很广——它包含所有DOM节点类型：不仅是你能看到的<div>这类HTML元素节点，还包括文本节点、注释节点这些“隐形”的节点。

2. 第一次拿到的Text对象是什么？ #

看你的HTML代码：

<div class="firstClass">
</div>
<div class="secondClass">
</div>

在两个<div>之间，有换行和空格这些空白字符。浏览器解析HTML时，会把这些空白字符解析成一个文本节点（类型为Text）。虽然这些字符在页面上看不到，但它们确实是DOM树里的一个节点，所以第一次调用x.nextSibling时，你拿到的就是这个空白文本节点。

你可以试着打印这个节点的textContent属性验证一下：

console.log(x.textContent); // 会输出换行、空格之类的空白符

3. 为什么第二次调用就拿到目标元素了？ #

这个空白文本节点的下一个兄弟节点，才是你真正想要的<div class="secondClass">元素节点，所以第二次调用x.nextSibling时，就获取到了目标元素。

4. 更省心的解决方案：nextElementSibling #

如果你只想获取元素类型的兄弟节点，完全不用绕两次，直接用nextElementSibling属性就行——它只会返回元素类型的兄弟节点，自动跳过文本、注释这些非元素节点。

修改你的代码试试：

function Sibling() {
 var x = document.getElementsByClassName('firstClass')[0];
 document.getElementById("out1").innerHTML = 'We are on <b> ' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>';
 x = x.nextElementSibling; // 替换成这个属性
 document.getElementById("out2").innerHTML = 'After SINGLE nextElementSibling we are on <b> ' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>';
}

这样调用一次就能直接拿到<div class="secondClass">元素了。

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