在 JavaScript 中清空节点的最佳方法是什么答案

【问题标题】：What is the best way to empty a node in JavaScript在 JavaScript 中清空节点的最佳方法是什么
【发布时间】：2021-10-26 02:29:14
【问题描述】：

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

使用innerHTML = ""会解析并创建一个新的空文本节点，但是循环删除child会导致回流？

【问题讨论】：

node.innerHTML = ""不创建一个新的空节点，而是清空node。
如果您要重复使用它们，为什么要尝试删除它们。您是否尝试替换 html 元素中的缩略图，如果是这样，只需在 img 元素上设置 href 属性。
我正在汇集节点以供以后重用。
所以 innerHTML = "" 不会创建一个空的文本节点？
@IntoTheVoid: “应用程序不会刷新，所以为了避免内存问题，我试图将节点创建保持在最低限度” FWIW，我会让浏览器担心内存管理，直到/除非你有一个实际的、明显的问题需要解决。

标签： javascript

【解决方案1】：

您至少有四个选择：

使用innerHTML = ""，如您在问题中所示。它将确保您调用它的元素根本没有子节点，并且不会创建任何新节点。它是specified 和可靠的跨浏览器（尽管there's an IE bug 可能会或可能不会影响您的代码），并且可能相当有效。
使用textContent = ""，这也是specified和可靠的跨浏览器（IE9+），有趣的是，IE11（至少）似乎没有textContent的错误innerHTML .它还具有不需要 HTML 解析器的优点，当然您提供的字符串 innerHTML 应该是 HTML。（不过，浏览器可能会针对字符串为空时进行优化。）

您可以在循环中使用removeChild，但这可能涉及对 DOM 的重复函数调用：

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

您可以替换父元素，用一个省略子元素的克隆：
```
// assuming elm is the element
const clone = elm.cloneNode(false);
parent.parentElement.replaceChild(clone, elm);
elm = clone;
```
请注意，与其他方法不同，这将删除父元素上的所有事件处理程序。

如果我不得不猜测，我猜textContent = "" 会是最快的，至少如果有很多孩子的话。但性能通常无关紧要，在极少数情况下，这会成为代码中明显变慢的部分。如果您遇到重要的情况，请使用目标浏览器中的每个选项测试您的实际代码，然后选择效果最好的那个。

人们喜欢综合基准，但综合基准非常不可靠并且对基准假设（例如被移除的儿童数量）敏感。

【讨论】：

【解决方案2】：

function clearNode(node, clone = true) {
  let emptyNode;

  if (clone) {
    emptyNode = node.cloneNode();
    node.parentNode.replaceChild(emptyNode, node);
    node = emptyNode;
  }
  else {
    while (node.hasChildNodes()) {
      node.removeChild(node.firstChild);
    }
    emptyNode = node;
  }

  return emptyNode;
}

【讨论】：

【解决方案3】：

您也可以只调用node.replaceChildren()，它会清空节点。它快速、干净，让您的意图清晰。

【讨论】：