标准与非标准浏览器下childNodes与children兼容性问题

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