爲什麼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及更早版本中加註釋}