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

在Javascript中，可以通過(guò) children 來(lái)獲取所有子節(jié)點(diǎn)。

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

語(yǔ)法：

    nodeObject.children

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

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

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

document.getElementById("demo").children;

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

下面，自定義一個(gè)函數(shù)來(lái)獲取所有的元素子節(jié)點(diǎn)：

var getChildNodes=function(ele){
   var childArr=ele.children,
         childArrTem=new Array();  //  臨時(shí)數(shù)組，用來(lái)存儲(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)看下面的演示

另外，在W3C規(guī)范中，是通過(guò) childNodes 來(lái)獲取子節(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)類(lèi)型更加廣泛。

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

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

var childArr=ele.children || ele.childNodes

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

var getChildNodes=function(ele){
   var childArr=ele.children || ele.childNodes,
         childArrTem=new Array();  //  臨時(shí)數(shù)組，用來(lái)存儲(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中，可以通過(guò) firstChild 來(lái)獲取第一個(gè)子節(jié)點(diǎn)。

語(yǔ)法：

    nodeObject.firstChild

其中，nodeObject 為節(jié)點(diǎn)對(duì)象（元素節(jié)點(diǎn)）。

IE8.0及其以下版本的瀏覽器會(huì)忽略節(jié)點(diǎn)間的空白節(jié)點(diǎn)（空格、回車(chē)和Tab鍵），遵循W3C規(guī)范的瀏覽器（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)的類(lèi)型是："+this.firstChild.nodeType+"\n"+
            "第一個(gè)子節(jié)點(diǎn)的名稱(chēng)是："+this.firstChild.nodeName
        );
    }
</script>

實(shí)例演示

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

在Chrome、Opera、Safari、FireFox下，顯示：
    第一個(gè)子節(jié)點(diǎn)：[object text]
    第一個(gè)子節(jié)點(diǎn)的類(lèi)型是：3
    第一個(gè)子節(jié)點(diǎn)的名稱(chēng)是：#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)的類(lèi)型是："+this.firstChild.nodeType+"\n"+
            "第一個(gè)子節(jié)點(diǎn)的名稱(chēng)是："+this.firstChild.nodeName
        );
    }
</script>

實(shí)例演示

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

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

在Javascript中，可以通過(guò) lastChild 來(lái)獲取最后一個(gè)子節(jié)點(diǎn)。

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

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

在Javascript中，可以通過(guò) hasChildNodes() 方法來(lái)判斷是否存在子節(jié)點(diǎn)。

語(yǔ)法：

    nodeObject.hasChildNodes()

其中，nodeObject 為節(jié)點(diǎn)對(duì)象（元素節(jié)點(diǎn)），返回值為Boolean類(lèi)型。

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

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

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