为什么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

Text也是一种节点！这是一些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及更早版本中的评论}