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

Question

我有一个画廊,里面有很多缩略图.为了防止DOM被节点填满,我正在重用它们.从DOM中删除节点的最佳方法是什么(不使用库)？

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

Answer 1

使用innerHTML = ""将确保您调用它的元素根本没有子节点(不创建任何新节点).它是可靠的跨浏览器(即使它最近才进入规范,从HTML5规范中引用),前提是您没有对要替换的元素中的节点的任何引用(如果这样做,有一个IE错误),可能相当有效.

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

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

如果我不得不猜测,我猜这比设置效率低得多innerHTML.而显然这是真的,在不同程度上(上面的循环是"则firstChild"在测试名单,与"的innerHTML"):

如果您真的担心哪个更有效(除非您看到实际问题,可能是过早优化),请在目标浏览器上测试您的特定代码.只要确保你的测试自我检查; 很长一段时间,这个答案在其中进行了一次测试,未能对其进行双重检查,并且存在缺陷.