childNodes与children同样是访问子节点,但是却又各有不同。
标准浏览器和非标准浏览器下获取childNodes时各有不同
Chrome、Firefox、IE9+等标准浏览器下,使用childNodes获取节点,它会将空格符、回车符、换行符也看做一个文本节点,而IE8及以下,则会无视空格、回车符。
如下代码:
<ul id="ul1"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> <script type="text/javascript"> var oUl = document.getElementById('ul1'); alert(oUl.childNodes.length); </script>
Chrome、Firefox、IE9+ 下弹出:9
IE8及以下弹出:4
我们再来给ul里面加一个非法嵌套元素,看有什么不同,如下代码:
<ul id="ul1"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <p>ppp</p> </ul> <script type="text/javascript"> var oUl = document.getElementById('ul1'); alert(oUl.childNodes.length); </script>
Chrome、Firefox、IE9下弹出:11
IE8下弹出:5
IE7及以下弹出:4
分析后发现,IE8下,会将非法嵌套的元素,当成合法的来解析(但仍不会解析空格、回车符);
而IE7以下版本,会将非法嵌套的元素,放入最后一个子元素中。
可以使用nodeType来判断节点类型来获取子元素集合,但由于childNodes兼容问题多多,推荐使用children属性访问子节点。
如下代码:
<ul id="ul1"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> <script type="text/javascript"> var oUl = document.getElementById('ul1'); alert(oUl.children.length); </script>
标准与非标准浏览器下均弹出:4
但当非法嵌套时,IE7及以下版本仍会有兼容性问题,因此合法使用标签也是需要注意的。
<ul id="ul1"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <p>ppp</p> </ul> <script type="text/javascript"> var oUl = document.getElementById('ul1'); alert(oUl.children.length); </script>
Chrome、Firefox、IE8+下弹出:5
IE7以下版本弹出:4