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

最新推荐文章于 2021-12-22 15:47:21 发布

angcong3485

最新推荐文章于 2021-12-22 15:47:21 发布

阅读量270

点赞数

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

版权

测试代码:

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

转载于:https://www.cnblogs.com/Coolkaka/p/5739808.html

angcong3485

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node与Elment以及子节点childrenNode与children的区别(2)

测试代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul id="ul1">...
复制链接

扫一扫