Почему так странно нумеруются childNodes в DOM-навигации?

Question

[Сергей]

Цель - нужно выбрать потомков тега, по которому кликаешь DOM-средствами. Никаких jQuery.
Однако, вместо [0],[1],[2] и тд., идёт нумерация [1],[3],[5].
Почему такая странная нумерация?

ссылка на страничку с кодом

<div id='row'>
    <div class='col-tm'>apple</div>
    <div class='col-tm'>banana</div>
    <div class='col-tm'>cranberry</div>
</div>
<hr>
<div id="result"></div>

var result = document.getElementById('result');//DIV id="result" для вывода результатов 
var first_column = document.getElementById('row');//DIV id="row" для выбора значений

var elem_apple=first_column.childNodes[1];//Выбираем "apple"
var elem_banana=first_column.childNodes[3];//Выбираем "banana"
var elem_cranberry=first_column.childNodes[5];//Выбираем "cranberry"

first_column.onclick = function(){//событие клика
    result.innerHTML=elem_apple.innerHTML+" "+elem_banana.innerHTML+" "+elem_cranberry.innerHTML;
};

Answer 1

[DanKud]

Потому что childNodes это не только дочерние тэги внутри элемента. Это и текст внутри элемента. В вашем случае каждый перенос строки это отдельная нода. Если сделать так, то будет как вы хотите:

<div id='row'><div class='col-tm'>apple</div><div class='col-tm'>banana</div><div class='col-tm'>cranberry</div></div>

Для получения HTMLCollection есть метод children и тогда текст без тэгов внутри элемента учитываться не будет:

var elem_apple = first_column.children[0];

Comments

[Сергей]

То есть, кусок текста - это тоже объект DOM?

[DanKud]

Сергей, конечно - https://learn.javascript.ru/dom-nodes#primer-dom

[McBernar]

Сергей, и перенос строки тоже, к сожалению.

[Сергей]

McBernar, как это подло с его стороны :-)

Answer 2

[SinGlEBW]

function searchTagName(childNodes){
for(var x = 0; x < childNodes.length; x++){
if(childNodes[x].nodeName == childNodes[2].nodeName){
console.log(childNodes[x]);
}}}

searchTagName(parent.childNodes);
Я тоже чё то не понял в чём соль этих участков якобы с контентом тегов. Присваивая текст тегу он отображается. Присваивая текст элементам #TEXT нигде не отображается.
Вообщем слепил условия на для тега p.
childNodes[x].nodeName == "p" - такая комбинация не катит