JavaScript >> Javascript 文檔 >  >> JavaScript

如何使用 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() 方法執行以下操作:

  1. 使用 lastChild 選擇最後一個子節點 屬性,並使用 removeChild() 將其刪除 方法。刪除最後一個子節點後,倒數第二個節點自動成為最後一個子節點。
  2. 重複第一步,直到沒有子節點。

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 解析器,並且可以立即將元素的所有子節點替換為單個文本節點。


Tutorial JavaScript 教程
  1. 如果條件vue js如何刪除數組中的許多數據

  2. currencylayer:簡單、有效的貨幣轉換

  3. Vue 組件 FTW - Toasted

  4. 如何找到功能組件內一行的完整調用堆棧?

  5. 使用 Node.js、Vue.js、Cloudinary 和 MySQL 構建文件共享應用程序:第 1 部分

  6. 如何在反應中導入 ipcRenderer?

  7. HTML5/Canvas 是否支持雙緩衝?

  1. 了解 API、Web 服務和微服務的基本概念

  2. Javascript獲取自定義按鈕的文本值

  3. JavaScript 在模式窗口中打開 URL |示例代碼

  4. 為什麼 split() 方法大約是。將結果推送到數組時慢 2 倍?

  5. 如何設置本地 MongoDB 連接

  6. 是否可以創建一個有分頁但沒有數據庫的網頁?

  7. 使用 React 和 Next.js 的微前端

  1. 了解 Web 應用程序中的渲染:簡介

  2. 📈 利用⚛️ React Hooks 的力量獲取 🦠 COVID19 的統計數據

  3. 製作自己的 MAL

  4. 使用 let 和 var 有什麼區別?