如何在 JavaScript 中有效率地從節點中刪除子元素？

刪除 JavaScript DOM 中的子元素

在 JavaScript 中使用 DOM 時，您可能會遇到需要從特定節點刪除子元素的情況。本指南將探索解決此任務的各種方法。

方法1：清除innerHTML

一個簡單的方法是將父節點的innerHTML 屬性設為空字串。雖然簡單，但此方法可能不適合高效能應用程序，因為它會觸發瀏覽器的 HTML 解析器。

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

範例HTML：

<div>

方法2：單獨刪除所有子節點

更細緻的方法是使用removeChild()單獨刪除每個子節點

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

以上是如何在 JavaScript 中有效率地從節點中刪除子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！