为什么nodeNames不同？

Question

Jsfiddle here：

<p id="para-01"><span>First span</span></p> 
<p id="para-02"> 
    <span>Second span</span> 
</p> 

两个段落几乎除了新线相同。为什么nodeNames是SPAN和#text？

Answer 1

文本也是一种节点！下面是一些HTML：

<p>hello <span>world</span></p> 

及其相应的树：

Element p 
    Text "hello " 
    Element span 
     Text "world" 

空白 - 在这里，换行和两个空间 - 仍然让一个文本节点，你的第二个<p>的第一个孩子是这个空白 - 仅限文本节点。

你可以在现代浏览器的第一个元素孩子与firstElementChild财产(updated fiddle)：

console.log(document.getElementById('para-02').firstElementChild.nodeName) 

，并与children集合，其中只包含元素*所有的浏览器：

console.log(document.getElementById('para-02').children[0].nodeName) 

_{*在IE8及更早版本中加注释}