删除HTML元素的所有子元素的更有效方法是什么？

Question

我知道访问和操作DOM可能非常昂贵，所以我希望尽可能高效地执行此操作。我的情况是某个div总是包含一个项目列表，但有时我想用一组完全不同的项目刷新该列表。在这种情况下，我可以构建新列表并将其附加到该div，但我还需要清除列表。什么是最好的方式？将innerHTML设置为空字符串？迭代子节点并调用“removeChild”？还有别的吗？

Answer 1

查看QuirksMode。这可能需要一些挖掘，但有时候在各种浏览器中进行此操作。虽然测试是在一年多前完成的，但在大多数浏览器中将innerHTML设置为""是最快的。

P.S。 here是页面。

Answer 2

将innerHTML设置为空字符串。

Answer 3

强调可能代价高昂。它并不总是昂贵的;事实上，当处理少量元素时，它可能是微不足道的。请记住，优化应该始终在最后完成，并且只有在您有明确证据证明您希望改进的特定方面确实是您的性能瓶颈之后才能完成。

我建议尽可能避免使用innerHTML进行混淆;很容易搞砸并对DOM做一些令人讨厌的事情，你无法优雅地恢复它。

对于99.9％的情况，此方法非常快，除非您从DOM中删除大量层次结构块：

while(ele.childNodes.length > 0) {
    ele.removeChild(ele.childNodes[ele.childNodes.length - 1])
}

Answer 4

我建议在您关心的浏览器上测试几个实现。不同的Javascript引擎具有不同的性能特征，不同的DOM操作方法在不同的引擎上具有不同的性能。注意过早优化并注意浏览器的差异。