测试代码:
<!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