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

我针对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更改的方式有何不同？

解决方法

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

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

仍然是,W3 doesn’t say that the child nodes should be preserved or destroyed(这是最近的候选推荐书,innerHTML was not part of HTML4 specification). W3的其他参考文献也没有定论(至少没有我发现过).

原文地址：https://www.jb51.cc/js/157638.html