javascript - NextSibling如何工作？

我想知道在使用方法NextSibling的情况下属性getElementsByClassName()如何工作？
这是显示问题的代码示例：

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.nextSibling;
    document.getElementById("out2").innerHTML = 'After SINGLE nextSibling we are on <b> ' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>. WHY IS THAT???!!!';
    x = x.nextSibling;
    document.getElementById("out3").innerHTML = 'After DOUBLE nextSibling we are on <b> ' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>';;
}

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

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

	<button onclick="Sibling()">ClickMeAndThenExplainTheResults</button>
</div>

<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p> 

因此，在第一个NextSibling之后，我希望继续学习第二个元素：

<div class="secondClass">
但是由于未知的原因，您需要调用double NextSibling才能从第一个元素移动到第二个元素。
正如您在第一个NextSibling之后看到的那样，对象的TypeName是Text。但我实际上看不到任何文字...

您能否解释一下为什么我们需要使用两个NextSibling？使用第一个NextSibling之后，Text对象得到了什么？

最佳答案

nextSibling获取下一个节点，而不是下一个元素节点。

在两个div元素节点之间，有一个包含空格的文本节点（空格，制表符和换行符是文本），这就是您所得到的。

比较：

1: <div></div> <div></div>
2: <div></div><div></div>

另请参见nextElementSibling。