javascript - 删除div节点的子节点

Question

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

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

其他是

innerWindowContentBox.innerHTML = '';

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

Answer 1

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

优点：

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

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

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

Answer 2

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

while (containerNode.firstChild ) {
    containerNode.removeChild (containerNode.childNodes[0] );
}

Answer 3

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

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