复现:##
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<script>
var first=document.getElementById("list").firstChild;
console.log(itm);//#text
var last=document.getElementById("list").lastChild;
console.log(itm);//#text
}
</script>
debug:##
<ul id="list"><li>one</li>
<li>two</li>
<li>three</li></ul>
<script>
var first=document.getElementById("list").firstChild;
console.log(itm);//<li>one</li>
var last=document.getElementById("list").lastChild;
console.log(itm);//<li>three</li>
}
</script>
so:问题主要是出自<ul id="list">
之后和</ul>
之前的“回车”和“空格”字符,复现里面打印出的#text就是这些“回车”和“空格”字符,也称文本节点,它们才是真正意义上的firstChild和lastChild,而不是我们想要获取的li,所以debug中将这些空白字符去掉即可。