取得所有子節(jié)點(diǎn)

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

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

語法：

    nodeObject.children

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

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

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

document.getElementById("demo").children;

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

下面，自訂一個(gè)函數(shù)來取得所有的元素子節(jié)點(diǎn)：

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

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

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

請(qǐng)看下面的示範(fàn)

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

下面列出個(gè)瀏覽器對(duì)childNodes 的支援情況：

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

var childArr=ele.children || ele.childNodes

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

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

取得第一個(gè)子節(jié)點(diǎn)

在Javascript中，可以透過firstChild?來取得第一個(gè)子節(jié)點(diǎn)。

語法：

    nodeObject.firstChild

其中，nodeObject 為節(jié)點(diǎn)物件（元素節(jié)點(diǎn)）。

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

舉例，取得第一個(gè)子節(jié)點(diǎn)：

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

實(shí)例示範(fàn)

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

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

將上面的程式碼稍作修改，去除節(jié)點(diǎn)間的空白：

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

實(shí)例示範(fàn)

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

取得最後一個(gè)子節(jié)點(diǎn)

在Javascript中，可以透過lastChild?來取得最後一個(gè)子節(jié)點(diǎn)。

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

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

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

語法：

    nodeObject.hasChildNodes()

其中，nodeObject 為節(jié)點(diǎn)物件（元素節(jié)點(diǎn)），傳回值為Boolean類型。

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

文字節(jié)點(diǎn)和屬性節(jié)點(diǎn)不可能再包含子節(jié)點(diǎn)，所以對(duì)於這兩類節(jié)點(diǎn)使用 ChildNodes() 方法傳回值永遠(yuǎn)是false。

如果 hasChildNodes() 傳回值為false，則 firstChild、lastChild 的傳回值為 null（節(jié)點(diǎn)不存在），children、childNodes 傳回值為空集合（陣列長度為 0）。