js之DOM操作（访问子节点和最后一个节点）

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

说明：与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

例子：

<div class="container" id="container"><div>1111</div><p>222</p><a href="javascript:;">333</a><div><a href="javascript:;">aaaa</a><a href="javascript:;">bbbb</a></div></div>  /*不能换行，换行会报错    有待改进*/
<a href="javascript:;" id="dianji">点击</a>

js：

<script>
    window.onload=function (){
        document.getElementById("dianji").onclick=function (){
            var lc=document.getElementById("container");
            document.write("Div的第一个节点是：" + lc.firstChild.innerHTML + "<br/>");
            document.write("Div的最后一个节点是：" + lc.lastChild.firstChild.innerHTML + "<br/>");
            var nodechilds = lc.childNodes;
            document.write("Div的第一个节点是：" + nodechilds[0].innerHTML + "<br/>");
            document.write("Div的最后一个节点是：" + nodechilds[nodechilds.length-1].lastChild.innerHTML + "<br/>");
            //alert(lc.lastChild.firstChild.innerHTML);
        }
        
    }
</script>

结果为：