JS lastChild不能动态添加样式是怎么回事？

Question

<ul id="test">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

有如上结构html， document.getElementById('test').lastChild.style 这样添加样式，
在google里面报的错误是： Cannot read property 'style' of undefined

是怎么回事呢

Answer 1

<script>
window.onload = function(){
    document.getElementById("test").lastChild.style.color = "red";
}
</script>

<ul id="test"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

上述的 DOM 结构若执行 document.getElementById("test").lastChild.nodeName // 返回 LI

DOM 若为

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

执行 document.getElementById("test").lastChild.nodeName // 返回 #text

属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text

我表达的是否清楚了？

Answer 2

最后一个li标签和ul结束标签之间的空白也是ul的子节点