왜 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

텍스트도 노드 유형입니다! 여기, 줄 바꿈 및 두 개의 공간 - - 여전히 텍스트 노드를 만들고, 두 번째 <p>의 첫 번째 자식이 공백입니다

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

공백 :

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

및 해당 트리 : 여기에 일부 HTML입니다 - 텍스트 노드 만.

당신은 firstElementChild 재산 (updated fiddle) 현대적인 브라우저의 첫 번째 요소의 아이를 얻을 수 있습니다 :

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

만 요소 *이 들어있는 children 수집, 모든 브라우저에서

:

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

_{* 더하기 의견은 IE8 및 이전 버전에서}