How does NextSibling work?

Question

I'm wondering how property NextSibling works in case of using method getElementsByClassName() ? Here is an code example showing the problem:

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> 

So, after the very first NextSibling I expected to get on the second element:

<div class="secondClass"> But for uknown reasons you need to call double NextSibling to move from the first element to the second one. And as you can see after the first NextSibling the TypeName of the object is Text. But I don't see any text actually...

Could you please explain why we need using two NextSibling and what's the Text object is getting after using the first NextSibling?

Answer 1

nextSibling gets the next node and not the next node that is an element.

Between the two div element nodes, there is a text node containing white space (spaces, tab, and new lines are text) and that is what you are getting.

Compare:

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

See also nextElementSibling.

Answer 2

As nextSibling returns the next Node object (even a space or a line feed),
you must want to use nextElementSibling instead.

See this question for details:
Whats the difference between nextElementSibling vs nextSibling

And here is a working snippet:

(function Sibling() {
  var x = document.getElementsByClassName('firstClass')[0];
  document.getElementById("out1").innerHTML = 'Current: <b>' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>';
  x = x.nextElementSibling;
  document.getElementById("out2").innerHTML = 'Next 1  : <b>' + x.className + '</b>. TypeName of the object is <i> ' + x.constructor.name + '</i>';
  x = x.nextElementSibling;
  document.getElementById("out3").innerHTML = 'Next 2  : <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>I do nothing</button>
</div>

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

Hope it helps.