DOM节点中childNodes和children的区别于相同

childNodes\chidren

这两个节点属性都是获取一个元素的子节点集合，或许就有人不知道，为什么作用一样，会有两个属性呢？其实是有不同的，就比如childNodes

<body>
　　<div id="wq">
　　　　<p>123</p>
　　　　<p>456</p>
　　　　<p>789</p>
　　</div>
　　<script>
　　　　var wq = document.getElementById('wq');
　　　　　　console.log(wq.childNodes);//[text, p, text, p, text, p, text]
　　　　　　console.log(wq.children);//[p, p, p]
　　</script>
</body>

看到这里大家就发现有所不同了，childNodes为什么会有4个text属性呢？  仔细点的朋友可能会发现childNodes打印出来的是wq下的所有节点属性，而children打印出来了则是元素节点，这就是这连个节点属性的不同之处。如果还是不明白，大家可以把p标签的空格都给删除掉，就像这样<p>123</p><p>456</p><p>789</p>或许就会知道为什么了。

还有需要注意的就是，wq.childNodes是只读属性，在标准下，包含了文本和元素类型的节点，也会包含非法嵌套的子节点 ，如果测试在非标准下只包含元素类型的节点，ie7以下不会包含非法嵌套子节点 。wq.children也是只读属性。

posted @ 2018-01-12 01:02  邦媛  阅读(479)  评论(0)    收藏  举报
2