標准與非標准瀏覽器下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