取得所有子節(jié)點

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

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

語法：

    nodeObject.children

#其中，nodeObject 為節(jié)點物件（元素節(jié)點），傳回值為所有子節(jié)點的集合（陣列）。

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

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

document.getElementById("demo").children;

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

下面，自訂一個函數來取得所有的元素子節(jié)點：

var getChildNodes=function(ele){
   var childArr=ele.children,
         childArrTem=new Array();  //  臨時數組，用來存儲符合條件的節(jié)點
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);  // push() 方法將節(jié)點添加到數組尾部
        }
    }
    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é)點的個數為："+childArr.length);
}
</script>

請看下面的示範

另外，在W3C規(guī)格中，是透過?childNodes?來取得子節(jié)點的，它是一個標準屬性，傳回指定元素的子節(jié)點的集合，包括HTML節(jié)點、文字節(jié)點、註解節(jié)點等，比children 傳回的節(jié)點類型更廣泛。

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

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

var childArr=ele.children || ele.childNodes

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

var getChildNodes=function(ele){
   var childArr=ele.children || ele.childNodes,
         childArrTem=new Array();  //  臨時數組，用來存儲符合條件的節(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 傳回值為空集合（陣列長度為 0）。