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>

結果為：