測試代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ul1"> <li>x</li> <li>x</li> <li>x</li> <li>x</li> </ul> <script> alert("childrenNodes:"+ document.getElementById("ul1").childNodes.length+" children:"+ document.getElementById("ul1").children.length) </script> </body> </html>
以上的結果為兩種結果
childrenNodes：9 children:4 IE
childrenNodes：4 children:4 谷歌
概念:NODE指的是所有節點（包括回車換行），而Elment僅僅是HTML節點也就是我們常說的元素.因為所有的節點都類型，W3C定義類型如下
1，childNodes 屬性，標准的，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本。可以通過nodeType來判斷是哪種類型的節點，只有當nodeType==1時才是元素節點，2是屬性節點，3是文本節點。
2，children 屬性，非標准的，它返回指定元素的子元素集合。它只返回HTML節點，甚至不返回文本節點。這個用的99%是這個功能來進行子節點功能的操作，且可以避免firstChildren與lastChildren的選取非元素節點的尷尬！例如上述代碼中的選取第一個子節點li,如果用firstChildren則選取的是回車節點也就是數值3的文本節點，並不是li元素節點，這時候用children[0]則選擇的是第一個元素節點li