Bagaimana untuk Mengeluarkan Elemen Kanak-kanak dengan Cekap dari Nod dalam JavaScript?

Mengalih keluar Elemen Kanak-kanak dalam JavaScript DOM

Apabila bekerja dengan DOM dalam JavaScript, anda mungkin menghadapi senario di mana anda perlu mengalih keluar elemen kanak-kanak daripada nod tertentu. Panduan ini akan meneroka pelbagai pendekatan untuk menangani tugasan ini.

Kaedah 1: Membersihkan innerHTML

Satu kaedah mudah ialah menetapkan sifat innerHTML nod induk kepada rentetan kosong. Walaupun mudah, pendekatan ini mungkin tidak sesuai untuk aplikasi berprestasi tinggi kerana ia mencetuskan penghurai HTML penyemak imbas.

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

Contoh HTML:

<div>

Kaedah 2: Alih keluar semua nod anak secara berasingan

Pendekatan yang lebih terperinci ialah mengalih keluar setiap nod anak secara individu menggunakan removeChild() kaedah.

const myNode = document.getElementById("foo");
while (myNode.hasChildNodes()) {
  myNode.removeChild(myNode.lastChild);
}

Kaedah 3: Pendekatan gabungan menggunakan QuerySelectorAll()

Jika anda tahu elemen anak khusus yang anda ingin alih keluar, anda boleh menggabungkan removeChild() dengan querySelectorAll() untuk disasarkan dan keluarkannya dengan lebih cekap.

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

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Elemen Kanak-kanak dengan Cekap dari Nod dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!