如何使用 JavaScript 刪除元素的所有子元素
要刪除元素的所有子節點,可以使用元素的 removeChild()
方法以及 lastChild
屬性。
removeChild()
方法從指定元素中刪除給定節點。它將刪除的節點返回為 Node
對象,或 null
如果節點不再可用。
這是一個示例代碼片段:
const removeChilds = (parent) => {
while (parent.lastChild) {
parent.removeChild(parent.lastChild);
}
};
// select target target
const body = document.querySelector('body');
// remove all child nodes
removeChilds(body);
removeChilds()
方法執行以下操作:
- 使用
lastChild
選擇最後一個子節點 屬性,並使用removeChild()
將其刪除 方法。刪除最後一個子節點後,倒數第二個節點自動成為最後一個子節點。 - 重複第一步,直到沒有子節點。
innerHTML
怎麼樣 和 textContent
?
您還可以使用 innerHTML 屬性來刪除所有子節點:
// select target target
const body = document.querySelector('body');
// remove all child nodes
body.innerHTML = '';
這種方法很簡單,但它可能不適合高性能應用程序,因為它會調用瀏覽器的 HTML 解析器來解析新字符串並更新 DOM。
如果您不想調用 HTML 解析器,請改用 textContent 屬性:
body.textContent = '';
根據 MDN,textContent
屬性表現優於 innerHTML
因為瀏覽器不必調用 HTML 解析器,並且可以立即將元素的所有子節點替換為單個文本節點。