删除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的更改，并且您可能会遇到一些奇怪或意外的行为。