首页 > 其他 > 详细

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

时间:2016-08-05 07:41:24      阅读:298      评论:0      收藏:0      [点我收藏+]

 测试代码:

 

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

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

原文:http://www.cnblogs.com/Coolkaka/p/5739808.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!