獲取所有子節(jié)點

在Javascript中，可以通過?children?來獲取所有子節(jié)點。

children只返回HTML節(jié)點，甚至不返回文本節(jié)點，雖然不是標準的DOM屬性，但是得到了幾乎所有瀏覽器的支持。

語法：

    nodeObject.children

其中，nodeObject 為節(jié)點對象（元素節(jié)點），返回值為所有子節(jié)點的集合（數(shù)組）。

注意：在IE中，children包含注釋節(jié)點。

例如，獲取 id="demo" 的節(jié)點的所有子節(jié)點：

document.getElementById("demo").children;

一般情況下，我們是希望獲取元素節(jié)點，可以通過 nodeType 屬性來進行刷選，nodeType==1 的節(jié)點為元素節(jié)點。

下面，自定義一個函數(shù)來獲取所有的元素子節(jié)點：

var getChildNodes=function(ele){
   var childArr=ele.children,
         childArrTem=new Array();  //  臨時數(shù)組，用來存儲符合條件的節(jié)點
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);  // push() 方法將節(jié)點添加到數(shù)組尾部
        }
    }
    return childArrTem;
}

例，獲取 id="demo" 的節(jié)點的所有元素子節(jié)點：

<div id="demo">
    <!-- 這里是注釋 -->
    <div>子節(jié)點一</div>
    <div>子節(jié)點二</div>
    <div>子節(jié)點三</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    var childArr=getChildNodes(this);
    alert("元素子節(jié)點的個數(shù)為："+childArr.length);
}
</script>

請看下面的演示

另外，在W3C規(guī)范中，是通過?childNodes?來獲取子節(jié)點的，它是一個標準屬性，返回指定元素的子節(jié)點的集合，包括HTML節(jié)點、文本節(jié)點、注釋節(jié)點等，比 children 返回的節(jié)點類型更加廣泛。

下面列出個瀏覽器對 childNodes 的支持情況：

為了提高代碼的兼容性，避免個別瀏覽器不支持 children 或 childNodes 的情況，可以這樣編寫代碼：

var childArr=ele.children || ele.childNodes

把上面的 getChildNodes() 函數(shù)稍作修改：

var getChildNodes=function(ele){
   var childArr=ele.children || ele.childNodes,
         childArrTem=new Array();  //  臨時數(shù)組，用來存儲符合條件的節(jié)點
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);
        }
    }
    return childArrTem;
}

獲取第一個子節(jié)點

在Javascript中，可以通過?firstChild?來獲取第一個子節(jié)點。

語法：

    nodeObject.firstChild

其中，nodeObject 為節(jié)點對象（元素節(jié)點）。

IE8.0及其以下版本的瀏覽器會忽略節(jié)點間的空白節(jié)點（空格、回車和Tab鍵），遵循W3C規(guī)范的瀏覽器（Chrome、FireFox、Safari等）則會把這些空白作為文本節(jié)點處理。

舉例，獲取第一個子節(jié)點：

<div id="demo">
    <div>子節(jié)點一</div>
    <div>子節(jié)點二</div>
    <div>子節(jié)點三</div>
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "第一個子節(jié)點："+this.firstChild+"\n"+
            "第一個子節(jié)點的類型是："+this.firstChild.nodeType+"\n"+
            "第一個子節(jié)點的名稱是："+this.firstChild.nodeName
        );
    }
</script>

實例演示

在IE8.0及其以下版本的瀏覽器中，顯示：
? ? 第一個子節(jié)點：[object HTMLDivElement]
? ? 第一個子節(jié)點的類型是：1
? ? 第一個子節(jié)點的名稱是：DIV

在Chrome、Opera、Safari、FireFox下，顯示：
? ? 第一個子節(jié)點：[object text]
? ? 第一個子節(jié)點的類型是：3
? ? 第一個子節(jié)點的名稱是：#text

將上面的代碼稍作修改，去掉節(jié)點間的空白：

<div id="demo"><div>子節(jié)點一</div><div>子節(jié)點二</div><div>子節(jié)點三</div></div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "第一個子節(jié)點："+this.firstChild+"\n"+
            "第一個子節(jié)點的類型是："+this.firstChild.nodeType+"\n"+
            "第一個子節(jié)點的名稱是："+this.firstChild.nodeName
        );
    }
</script>

實例演示

在所有瀏覽器下，顯示：
? ? 第一個子節(jié)點：[object HTMLDivElement]
??? 第一個子節(jié)點的類型是：1
??? 第一個子節(jié)點的名稱是：DIV

獲取最后一個子節(jié)點

在Javascript中，可以通過?lastChild?來獲取最后一個子節(jié)點。

與 firstChild 一樣，IE8.0及其以下版本的瀏覽器會忽略節(jié)點間的空白節(jié)點（空格、回車和Tab鍵），遵循W3C規(guī)范的瀏覽器（Chrome、FireFox、Safari等）則會把這些空白作為文本節(jié)點處理。

判斷是否存在子節(jié)點

在Javascript中，可以通過?hasChildNodes()?方法來判斷是否存在子節(jié)點。

語法：

    nodeObject.hasChildNodes()

其中，nodeObject 為節(jié)點對象（元素節(jié)點），返回值為Boolean類型。

IE8.0及其以下版本的瀏覽器會忽略節(jié)點間的空白節(jié)點（空格、回車和Tab鍵），遵循W3C規(guī)范的瀏覽器（Chrome、FireFox、Safari等）則會把這些空白作為文本節(jié)點處理。

文本節(jié)點和屬性節(jié)點不可能再包含子節(jié)點，所以對于這兩類節(jié)點使用 ChildNodes() 方法返回值永遠為false。

如果 hasChildNodes() 返回值為false，則 firstChild、lastChild 的返回值為 null（節(jié)點不存在），children、childNodes 返回值為空集合（數(shù)組長度為 0）。