javascript - 为什么一个DIV只有一个子节点却有三个子节点？

Question

我有两个 div 看起来像:

<div id="responseframe">
    <div id="oldframe"> 
    </div>
</div>

我认为#oldframe DIV 是#responseframe 的唯一子元素。但是，当我用 javascript 编写时，

    var old=document.getElementById("responseframe");
    var nodesnumber=old.childNodes.length;
    console.log("-------------Here is the nodes number of reponseframe---------: "+nodesnumber);
    var nodesname=old.childNodes[i].nodeName;
    console.log("-------------Here is the nodes name of reponseframe's child---------: "+nodesname);

控制台告诉我#responseframe 有 3 个子节点，

1. childNode[0] 是#text;
2. childNode[1] 是 DIV ;
3. childNode[2] 是#text

为什么有2个#text？谢谢你的任何想法。

Answer 1

因为您在 <div id="responseframe"> 之后添加了新行然后先</div> .

如果你把它放在一行中，就会有一个节点:div。

HTML:

<div id="responseframe"><div id="oldframe"></div></div>

输出:

-------------Here is the nodes number of reponseframe---------: 1 
-------------Here is the nodes name of reponseframe's child---------: DIV

这是 fiddle :http://jsfiddle.net/cassln/t7kec97u/2/