我有以下代码来删除 div 节点的子节点。这两个代码都正确吗?
while(innerWindowContentBox.hasChildNodes())
innerWindowContentBox.removeChild(innerWindowContentBox.childNodes[0]);
其他是
innerWindowContentBox.innerHTML = '';
请注意,该代码用于 Greasemonkey 脚本,因此不需要 IE 支持。
我有以下代码来删除 div 节点的子节点。这两个代码都正确吗?
while(innerWindowContentBox.hasChildNodes())
innerWindowContentBox.removeChild(innerWindowContentBox.childNodes[0]);
其他是
innerWindowContentBox.innerHTML = '';
请注意,该代码用于 Greasemonkey 脚本,因此不需要 IE 支持。
这两段代码都可以完成工作,但使用的是 DOM 方法(即while(innerWindowContentBox.hasChildNodes() ...
)。
优点:
它快了很多。 请参阅jsperf.com 上的速度比较。 在示例 HTML(数百个节点,每个节点都有事件处理程序)上,DOM 方法的速度要快 10 到 20 倍(到目前为止)。
它避免了坏习惯。乱搞innerHTML
可能会导致意想不到的错误,尤其是在需要广泛浏览器支持的代码上。至少,它会破坏您可能想要保留的事件处理程序。对于这种特殊情况,这不是问题,但如果你养成了innerHTML
操纵的习惯,它会在某个时候咬你。
DOM 方法可以通过手术改变您需要的部分,其中innerHTML
会破坏所有子节点,从而需要浏览器重建您希望保留的任何内容。
在@Brock Adams 发布的jsPerf 基准测试中添加了另一个测试用例。element.firstChild
使用(至少在 Chrome 中)进行测试会稍微快一些:
while (containerNode.firstChild ) {
containerNode.removeChild (containerNode.childNodes[0] );
}
就用户和应用程序的行为而言,这两者都应该做大致相同的事情。
但是,值得一提的是,如果您要向页面添加元素,您应该使用前一种方法。当您使用 innerHTML 时,JS 引擎可能并不总是知道 DOM 的变化,并且您可能会遇到一些奇怪或意外的行为。