node与Elment以及子节点childrenNode与children的区别(2)

 测试代码:

 

<!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

posted @ 2016-08-05 06:58  Cool咔咔  阅读(2334)  评论(0)  编辑  收藏  举报