javascript - 是什么导致 childNodes 返回 #text 而不是 <div>？

Question

childNodes偶尔给我#text元素而不是 <div>

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

当我尝试像这样访问孙子时:

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

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

Chrome 给我这个:

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

这里是 JSFiddle

起初，我以为它在某处发现了空白，但是console.log(xxx.childNodes[ 1 ])仅返回 3 个节点。在我未经训练的眼睛看来，这就像是邪恶的魔法。

谁有更科学的解释？

Answer 1

空格也会创建文本节点。你的 #second-div 实际上有 5 个 child ，其中只有 2 个是元素:

• childNodes[0]:开始标签和#third-div
之间的换行符
• childNodes[1]:#third-div
• childNodes[2]:#third-div 和#third-divs-sibling
之间的换行符
• childNodes[3]:#third-divs-sibling
• childNodes[4]:#third-divs-sibling和结束标签之间的换行符

如果您只查找元素，可以使用 .children collection而不是 .childNodes。