为什么IE在DOM更改后丢弃DOM元素的innerHTML/children？

Question

我针对IE,Chrome和Firefox测试了以下代码,并想知道导致结果差异的原因.

var body = document.getElementsByTagName('body')[0];
body.innerHTML = '<div id="myId"><span>I am a text</span></div>';
var divElement = document.getElementById('myId');

console.log(divElement.children.length); 
// All browsers say "1" !

body.innerHTML = ''; // just resetting the DOM

console.log(divElement.children.length); 
// Chrome and FF say "1", IE says "Sorry guys, it's 0"

毫不奇怪,在三个浏览器中,在第二次innerHTML更改之后,divElement对象不再引用渲染 <div>.我没有遇到麻烦.

我发现更有趣的是IE似乎丢弃了divElement孩子.Chrome和FF仍然允许我使用旧标记及其子标记,就像它们被渲染一样,但是IE将标记转换为空标记.

浏览器处理innerHTML导致此行为的更改的方式有何不同？

Answer 1

IE采用不同的innerHTML属性方法(与其他浏览器相比).虽然预期的操作是首先删除子节点(保留引用),然后设置新的HTML片段,IE实际上似乎递归地销毁所有子节点,使引用(如divElement示例中)完全为空且无功能.该innerText方法具有类似的效果.

我得到的最好的解释是在一篇MSDN帖子中声称在IE中,innerHTML它是DHTML(不是DOM)特征,也是一种低级破坏性方法.我知道这innerHTML是在W3 DOM规范之前实现的(回到IE/Netscape浏览器大战),但不知道这种低级行为是否是IE中的一些遗留实现.

尽管如此,W3并没有说应该保留或销毁子节点(这是一个非常新的候选推荐标准,innerHTML不是HTML4规范的一部分).W3的其他参考文献也没有定论(至少没有我发现的).