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

Question

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

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

Answer 1

使用innerHTML = ""将确保您调用它的元素根本没有子节点（不创建任何新节点）。它是可靠的跨浏览器（即使它最近刚进入a specification，它是从HTML5 spec引用的提供你没有任何引用元素中被替换的节点（如果你这样做，there's an IE bug），并且可能效率很高。

您的另一个选择是使用removeChild，但这涉及对DOM的可能重复的函数调用：

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

如果我不得不猜测，我猜这比设置innerHTML效率低得多。而apparently that's true，在不同程度上（测试列表中的上面的循环是“firstChild”，与“innerHTML”相对）：

如果您真的担心哪个更有效（除非您看到实际问题，可能是过早优化），test your specific code在您的目标浏览器上。只要确保你的测试自我检查;对于长时间，这个答案在其中进行了一次测试，未能对其进行双重检查，并且存在缺陷。

Answer 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;
}