删除div节点的子节点

Question

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

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

其他是

innerWindowContentBox.innerHTML = '';

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

Answer 1

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

优点：

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

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

3. DOM方法可以通过外科手术改变您需要的位，innerHTML会破坏所有子节点，从而需要浏览器重建您想要保留的任何节点。

Answer 2

为@Brock Adams发布的jsPerf benchmark添加了另一个测试用例。使用element.firstChild（至少在Chrome中）测试速度稍快一些：

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

Answer 3

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

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