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

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

---

使用

innerHTML=“”

将解析并创建一个新的空文本节点，但循环和删除子节点将导致回流？

您至少有四个选项：

如您在问题中所示，使用

innerHTML=“

”。它将确保调用它的元素根本没有子节点，并且不会创建任何新节点。它是一款可靠的跨浏览器软件（尽管这可能会影响到您的代码，也可能不会影响到您的代码），而且可能相当高效

使用

textContent=”“

，这也是一款可靠的跨浏览器（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=“

会是最快的，至少如果有很多孩子的话。但是性能通常并不重要，这是一种极为罕见的情况，在这种情况下，代码的速度会明显变慢。如果遇到重要的情况，请使用目标浏览器中的每个选项测试实际代码，并选择最有效的选项

人们喜欢合成基准测试，但合成基准测试非常不可靠，而且对基准测试假设（例如被删除的子项数量）非常敏感。

函数clearNode（node，clone=true）{
让空节点；
如果（克隆）{
emptyNode=node.cloneNode（）；
node.parentNode.replaceChild（emptyNode，node）；
节点=空节点；
}
否则{
while（node.hasChildNodes（））{
node.removeChild（node.firstChild）；
}
emptyNode=节点；
}
返回空节点；
}

node.innerHTML=”“

不会创建新的空节点，而是清空

节点

。如果重复使用它们，为什么要尝试删除它们。您是否正在尝试替换html元素中的缩略图，如果是，请在

img

元素上设置

href

属性。我正在汇集节点以供以后重用。因此innerHTML=“”不会创建空文本节点？@无效：“应用程序将不会刷新，因此为了避免内存问题，我正在尝试将节点创建保持在最低限度”FWIW，我会让浏览器担心内存管理，直到/除非您有实际的、明显的问题要解决。