2

我有以下代码来删除 div 节点的子节点。这两个代码都正确吗?

while(innerWindowContentBox.hasChildNodes())     
innerWindowContentBox.removeChild(innerWindowContentBox.childNodes[0]);

其他是

innerWindowContentBox.innerHTML = '';

请注意,该代码用于 Greasemonkey 脚本,因此不需要 IE 支持。

4

3 回答 3

2

这两段代码都可以完成工作,但使用的是 DOM 方法(即while(innerWindowContentBox.hasChildNodes() ... )。

优点:

  1. 它快了很多。 请参阅jsperf.com 上的速度比较 在示例 HTML(数百个节点,每个节点都有事件处理程序)上,DOM 方法的速度要快 10 到 20 倍(到目前为止)。

  2. 它避免了坏习惯。乱搞innerHTML可能会导致意想不到的错误,尤其是在需要广泛浏览器支持的代码上。至少,它会破坏您可能想要保留的事件处理程序。对于这种特殊情况,这不是问题,但如果你养成了innerHTML操纵的习惯,它会在某个时候咬你。

  3. DOM 方法可以通过手术改变您需要的部分,其中innerHTML会破坏所有子节点,从而需要浏览器重建您希望保留的任何内容。

于 2012-02-27T09:52:07.610 回答
2

在@Brock Adams 发布的jsPerf 基准测试中添加了另一个测试用例。element.firstChild使用(至少在 Chrome 中)进行测试会稍微快一些:

while (containerNode.firstChild ) {
    containerNode.removeChild (containerNode.childNodes[0] );
}
于 2012-02-27T22:26:19.777 回答
0

就用户和应用程序的行为而言,这两者都应该做大致相同的事情。

但是,值得一提的是,如果您要向页面添加元素,您应该使用前一种方法。当您使用 innerHTML 时,JS 引擎可能并不总是知道 DOM 的变化,并且您可能会遇到一些奇怪或意外的行为。

于 2012-02-27T07:23:33.907 回答