What causes childNodes to return #text instead of <div>?

childNodes occasionally gives me #text element instead of <div>

<div class="first-div">
    <div class="second-div">
        <div class="third-div">1</div>
        <div class="third-divs-sibling">2</div>
    </div>
</div>

When I try to access the grandchildren here like this:

var xxx = document.getElementsByClassName('first-div')[0];

console.log(xxx.childNodes[ 1 ].childNodes[ 1 ]);
console.log(xxx.childNodes[ 1 ].childNodes[ 2 ]);

Chrome gives me this:

<div class="third-div">1</div>
#text

Here is JSFiddle

At first, I thought it found white space somewhere, but console.log(xxx.childNodes[ 1 ]) returns only 3 nodes. It looks like foul magic to my untrained eye.

Does anyone have a more scientific explanation?