如何在 JavaScript 中高效地从节点中删除子元素？

删除 JavaScript DOM 中的子元素

在 JavaScript 中使用 DOM 时，您可能会遇到需要从特定节点删除子元素的情况。本指南将探索解决此任务的各种方法。

方法1：清除innerHTML

一个简单的方法是将父节点的innerHTML 属性设置为空字符串。虽然简单，但此方法可能不适合高性能应用程序，因为它会触发浏览器的 HTML 解析器。

const myNode = document.getElementById("foo");
myNode.innerHTML = "";

示例 HTML：

<div>
<h3 id="方法-单独删除所有子节点">方法 2：单独删除所有子节点</h3>
<p>更细粒度的方法是使用removeChild()单独删除每个子节点</p>
<pre class="brush:php;toolbar:false">const myNode = document.getElementById("foo");
while (myNode.hasChildNodes()) {
  myNode.removeChild(myNode.lastChild);
}

方法三：使用 QuerySelectorAll() 的组合方法

如果你知道要删除的具体子元素，可以将removeChild() 和 querySelectorAll() 组合起来来定位并更有效地去除它们。

const myNode = document.getElementById("foo");
const childElements = myNode.querySelectorAll("span, div");
childElements.forEach((element) => {
  myNode.removeChild(element);
});