javascript - 在 JavaScript 中清空节点的最佳方法是什么

Question

我有一个包含一长串缩略图的图库。为了防止 DOM 被节点填满，我正在重用它们。从 DOM 中删除节点的最佳方法是什么(不使用库)？

使用innerHTML = "" 将解析并创建一个新的空文本节点，但循环和删除子节点会导致重排吗？

Answer 1

您至少有四种选择:

1. 使用问题中显示的 innerHTML = ""。它将确保您调用它的元素根本没有子节点，并且不会创建任何新节点。这是specified和可靠的跨浏览器(尽管 there's an IE bug 可能会或可能不会影响您的代码)，并且可能相当高效。

2. 使用 textContent = ""，这也是 specified和可靠的跨浏览器 (IE9+)，有趣的是，IE11(至少)似乎没有 innerHTML 的 textContent 错误。它还具有不需要 HTML 解析器的优点，当然您提供的字符串 innerHTML 应该是 HTML。 (不过，当字符串为空时，浏览器可能会进行优化。)

3. 您可以在循环中使用 removeChild，但这涉及到对 DOM 的潜在重复函数调用:

   // assuming elm is the element
   while (elm.firstChild) {
      elm.removeChild(elm.firstChild);
   }
   

4. 您可以替换父元素为省略子元素的克隆:

   // assuming elm is the element
   const clone = elm.cloneNode(false);
   parent.parentElement.replaceChild(clone, elm);
   elm = clone;
   

   请注意，与其他元素不同，这将删除父元素上的所有事件处理程序。

如果非要我猜的话，我猜 textContent = "" 会是最快的，至少在有很多 child 的情况下。但是性能通常无关紧要，这是一种极其罕见的情况，它是代码中明显较慢的部分。如果您遇到重要的情况，请使用目标浏览器中的每个选项测试您的实际代码，然后选择最有效的一个。

人们喜欢综合基准，但综合基准非常不可靠并且对基准假设(例如被移除的 child 的数量)很敏感。