children与childNodes的区别

来源：互联网发布：oracle数据库使用手册编辑：程序博客网时间：2024/05/30 23:01

乍一看感觉一样平时用的时候也没怎么留意

其实区别还是有点儿大

传言啊这个 childNodes是正统属性亲生的

而这个children是野孩子

这个野孩子比较随意所以用它返回来的就只有DOM元素了其他的文字啥的都不返回

而 childNodes比较讲究事无巨细都要返回来

但是我还是觉得野孩子乖洒脱啊所以也获得了几乎所有浏览器的支持如果你想要DOM节点直接用野孩子就可以了

感觉有点儿偏心啊

为啥偏心呢？

这个亲生娃儿childNodes心太细了啥都给你返回来了

下面我们就举个例子

首先是野孩子的结果

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><div id="father"><div>01</div><div>02</div><div>03</div></div><script type="text/javascript">console.log(document.getElementById("father").children);</script></body></html>

上面的结果只返回三个div 数组长度是3 换成childNodes也一样因为没有文本元素啊

但是别着急换种写法问题就出来了

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><div id="father"> <div>01</div><div>02</div><div>03</div></div><script type="text/javascript">console.log(document.getElementById("father").children);</script></body></html>

不知道有没有看出来上面两端代码的区别我在那个father后面加了个空格结果呢

childNodes就返回来了四个长度的数组 ....好吧很乖

还有更奇葩的

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><div id="father"><div>01</div><div>02</div><div>03</div></div><script type="text/javascript">console.log(document.getElementById("father").childNodes);</script></body></html>

不知道各位看出区别来了没有

我加了个换行符

结果又给我返回来了四个长度的数组妈呀换行也算啊

如果你说我就想用亲儿子但是呢又不想让他返回换行元素就只能按照下面这么来写

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><div id="father"><div>01</div><div>02</div><div>03</div></div><script type="text/javascript">console.log(document.getElementById("father").childNodes);</script></body></html>

好吧这还是我认识的DOM吗

算了还是要私生子好了

0 0