childNodes []在IE9和8中沒有在IE9中工作

Question

我有一些代碼適用於IE7和8但不適用於9

var table = document.getElementById('RadGrid_ctl01').childNodes[2];

這在IE9中不起作用，現在我確實讀過IE9計數空格等，因此索引與IE7和IE8中的索引不一樣，所以當我將索引從2改為4時我調試並找到了相同的值：

var table = document.getElementById('RadGrid_ctl01').childNodes[4];

但是當我稍后嘗試使用此代碼訪問表對象時

var editor = table.childNodes[i].childNodes[j].childeNodes[0]

變量編輯器將在IE7和IE8中獲得預期值，但在IE9中它變為null，因為childNodes [j]沒有任何子節點。 我不知道是什么原因引起的。 i和j都從0開始。

誰知道我做錯了什么？

Answer 1

IE9的行為是正確的，較低版本是錯誤的。 這個問題是由兩個html標簽之間的空白引起的，這些標簽應該導致文本節點。

更新：添加了示例

<ul><li>Foo</li><li>Bar</li></ul>

<ul>
    <li>Foo</li>
    <li>Bar</li>
</ul>

看起來幾乎一樣，不是嗎？ 然而，由此產生的DOM不同。 第一個例子會導致：

- ul
-- li
--- (text)Foo
-- li
---(text)Bar

而第二個Markup導致這個：

- ul
-- (text)
-- li
--- (text)Foo
-- (text)
-- li
--- (text)Bar
-- (text)

由於文本節點不能有任何子節點，這會導致您的Javascript無聲地失敗。

可能解決方案

一種解決方案是去除空文本節點。 我曾經寫過一個關於這個問題的要點 。

更新：

Node.normalize()似乎是一個更可靠的解決方案，但我沒有檢查它的瀏覽器兼容性。