为什么nodeNames不同？

Question

Jsfiddle在这里:

<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属性(更新的小提琴)获取现代浏览器中的第一个元素子元素:

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

并且在所有具有该children集合的浏览器中,该集合仅包含元素*:

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

_{*加上IE8及更早版本的评论}