![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:19:4.png?version=1&modificationDate=1452478867000&api=v2)
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:19:9.png?version=1&modificationDate=1452478867000&api=v2)
会输出什么:
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:19:17.png?version=1&modificationDate=1452478867000&api=v2)
不对呀?!!!不应该是2 和 3 吗?
这里的childNodes 搞的鬼,它会把空白节点也算进去。
所以我们用children
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:19:24.png?version=1&modificationDate=1452478867000&api=v2)
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:19:32.png?version=1&modificationDate=1452478867000&api=v2)
这个不是我们的重点,重点是这个:
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:19:42.png?version=1&modificationDate=1452478867000&api=v2)
我们新加了querySelectorAll 语句来获取子节点的个数,结果是:
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:19:51.png?version=1&modificationDate=1452478867000&api=v2)
queryselectorAll 获取的节点居然没有变化。所以这里印证了我们的标题实时性,结果已经很明确了,就不用我多说什么了。
用getElementsByTagName举例和id是一样的。
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:20:1.png?version=1&modificationDate=1452478867000&api=v2)
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:20:10.png?version=1&modificationDate=1452478867000&api=v2)
但是发现了一些其他的问题,有待考究
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:20:15.png?version=1&modificationDate=1452478867000&api=v2)
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:20:21.png?version=1&modificationDate=1452478867000&api=v2)
里边length:4
360
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:20:29.png?version=1&modificationDate=1452478867000&api=v2)
FF
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:20:33.png?version=1&modificationDate=1452478867000&api=v2)
Ie9
![](http://wiki.mogujie.org/download/attachments/41127126/image2016-1-11%2010:20:37.png?version=1&modificationDate=1452478867000&api=v2)
浏览器嗯……很深奥……
结束语:
querySelectorAll 与 jQuery 的使用区别;
NodeLlist 与 HTMLCollection 两个对象;
proto 与 prototype 的区别;
:scope 、 :context 伪类;
childNodes、nodeType、children;
getElementById与querySelectorAll 的实时性区别。(getElementByTagName与ById一样)
考究问题
网友评论