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()似乎是一个更可靠的解决方案，但我没有检查它的浏览器兼容性。