javascript - NextSibling 如何运作？

Question

我想知道属性 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 对象会得到什么？

Answer 1

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

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

比较:

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

另请参阅nextElementSibling .