1.獲取所有子節點 1.1  在Javascript中，可以通過 children來獲取所有子節點。 語法：nodeObject.children 其中，nodeObject 為節點物件（元素節點），返回值為所有子節點的集合（陣列）。 例如，獲取 id="demo" 的節點的所有子節點： document.getElementByIdx_x("demo").children; children只返回HTML節點，甚至不返回文字節點，雖然不是標準的DOM屬性，但是得到了幾乎所有瀏覽器的支援。 注意：在IE中，children包含註釋節點。 一般情況下，我們是希望獲取元素節點，可以通過nodeType屬性來進行篩選，nodeType==1的節點為元素節點。 1.2  在W3C規範中，是通過childNodes來獲取子節點的，它是一個標準屬性，返回指定元素的子節點的集合，包括HTML節點、文字節點、註釋節點等，比children返回的節點型別更加廣泛。 E6/IE7/IE8/Safari/Chrome/Opera 支援childNodes IE9/Firefox  不支援childNodes var getChildNodes=function(ele){    var childArr=ele.children|| ele.childNodes,  //相容更多的瀏覽器       childArrTem=new Array();  // 臨時陣列，用來儲存符合條件的節點     for(vari=0,len=childArr.length;i        if(childArr[i].nodeType==1){           childArrTem.push(childArr[i]);        }     }     returnchildArrTem; } 2.獲取第一個子節點 在Javascript中，可以通過 firstChild 來獲取第一個子節點。 語法：nodeObject.firstChild 其中，nodeObject 為節點物件（元素節點）。 IE8.0及其以下版本的瀏覽器會忽略節點間的空白節點（空格、回車和Tab鍵），遵循W3C規範的瀏覽器（Chrome、FireFox、Safari等）則會把這些空白作為文字節點處理。 3.獲取最後一個子節點 在Javascript中，可以通過 lastChild 來獲取最後一個子節點。 與firstChild一樣，IE8.0及其以下版本的瀏覽器會忽略節點間的空白節點（空格、回車和Tab鍵），遵循W3C規範的瀏覽器（Chrome、FireFox、Safari等）則會把這些空白作為文字節點處理。 4.判斷是否存在子節點 在Javascript中，可以通過 hasChildNodes() 方法來判斷是否存在子節點。 語法：nodeObject.hasChildNodes() 其中，nodeObject 為節點物件（元素節點），返回值為Boolean型別。 IE8.0及其以下版本的瀏覽器會忽略節點間的空白節點（空格、回車和Tab鍵），遵循W3C規範的瀏覽器（Chrome、FireFox、Safari等）則會把這些空白作為文字節點處理。 文字節點和屬性節點不可能再包含子節點，所以對於這兩類節點使用 ChildNodes()方法返回值永遠為false。 如果 hasChildNodes() 返回值為false，則 firstChild、lastChild 的返回值為null（節點不存在），children、childNodes 返回值為空集合（陣列長度為 0）。 轉載自：http://www.itxueyuan.org/view/6349.html

在Javascript中，可以獲取元素的所有子節點，也可以獲取第一個子節點和最後一個子節點。

獲取所有子節點

在Javascript中，可以通過 children 來獲取所有子節點。

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

語法：
    nodeObject.children
其中，nodeObject 為節點物件（元素節點），返回值為所有子節點的集合（陣列）。

注意：在IE中，children包含註釋節點。

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

1. document.getElementById
   ("demo").children;

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

下面，自定義一個函式來獲取所有的元素子節點：

1. var getChildNodes=function(ele){
2.    var childArr=ele.children,
3.          childArrTem=new Array();  //  臨時陣列，用來儲存符合條件的節點
4.     for(var i=0,len=childArr.length;i<len;i++){
5.         if(childArr[i].nodeType==
   1){
6.             childArrTem.push(childArr[i]); // push() 方法將節點新增到陣列尾部
7.         }
8.     }
9.     return childArrTem;
10. }

舉例，獲取 id="demo" 的節點的所有元素子節點：

1. <div id="demo">
2. <!-- 這裡是註釋 -->
3. <div>子節點一</div>
4. <div>子節點二</div>
5. <div>子節點三</div>
6. </div>
7. <script type=
   "text/javascript">
8. document.getElementById("demo").onclick=function(){
9. var childArr=getChildNodes(this);
10. alert("元素子節點的個數為："+childArr.length);
11. }
12. </script>

請看下面的演示（點選即可）： 子節點一 子節點二 子節點三
另外，在W3C規範中，是通過 childNodes 來獲取子節點的，它是一個標準屬性，返回指定元素的子節點的集合，包括HTML節點、文字節點、註釋節點等，比 children 返回的節點型別更加廣泛。

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

childNodes	IE6/IE7/IE8/Safari/Chrome/Opera	IE9/Firefox
	支援	不支援

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

1. var childArr=ele.children || ele.childNodes

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

1. var getChildNodes=function(ele){
2.    var childArr=ele.children || ele.childNodes,
3.          childArrTem=new Array();  //  臨時陣列，用來儲存符合條件的節點
4.     for(var i=0,len=childArr.length;i<len;i++){
5.         if(childArr[i].nodeType==1){
6.             childArrTem.push(childArr[i]);
7.         }
8.     }
9.     return childArrTem;
10. }

獲取第一個子節點

在Javascript中，可以通過 firstChild 來獲取第一個子節點。

語法：
    nodeObject.firstChild
其中，nodeObject 為節點物件（元素節點）。

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

舉例，獲取第一個子節點：

1. <div id="demo">
2. <div>子節點一</div>
3. <div>子節點二</div>
4. <div>子節點三</div>
5. </div>
6. <script type="text/javascript">
7. document.getElementById("demo").onclick=function(){
8. alert(
9. "第一個子節點："+this.firstChild+"\n"+
10. "第一個子節點的型別是："+this.firstChild.nodeType+"\n"+
11. "第一個子節點的名稱是："+this.firstChild.nodeName
12. );
13. }
14. </script>

例項演示（點選即可） 子節點一 子節點二 子節點三
在IE8.0及其以下版本的瀏覽器中，顯示：
    第一個子節點：[object HTMLDivElement]
    第一個子節點的型別是：1
    第一個子節點的名稱是：DIV

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

將上面的程式碼稍作修改，去掉節點間的空白：

1. <div id="demo"><div>子節點一</div><div>子節點二</div><div>子節點三</div></div>
2. <script type="text/javascript">
3.     document.getElementById("demo").onclick=function(){
4.         alert(
5.             "第一個子節點："+this.firstChild+"\n"+
6.             "第一個子節點的型別是："+this.firstChild.nodeType+"\n"+
7.             "第一個子節點的名稱是："+this.firstChild.nodeName
8.         );
9.     }
10. </script>

例項演示（點選即可） 子節點一 子節點二 子節點三
在所有瀏覽器下，顯示：
    第一個子節點：[object HTMLDivElement]
    第一個子節點的型別是：1
    第一個子節點的名稱是：DIV

獲取最後一個子節點

在Javascript中，可以通過 lastChild 來獲取最後一個子節點。

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

判斷是否存在子節點

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

語法：
    nodeObject.hasChildNodes()
其中，nodeObject 為節點物件（元素節點），返回值為Boolean型別。

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

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

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