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的其他参考文献也没有定论(至少没有我发现过).

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...