Cách xóa tất cả phần tử con khỏi phần tử DOM

Với một phần tử DOM, làm cách nào để bạn loại bỏ tất cả các phần tử con của nó?

Cho một mục trong DOM, hãy sử dụngquerySelector()để xác định nó, như thế này:

const item = document.querySelector('#itemId')

sau đó, để loại bỏ tất cả các phần tử con của nó, bạn có một vài giải pháp khác nhau.

Cách nhanh nhất trông như thế này:

item.innerHTML = ''

Một giải pháp khác được đề xuất là: tạo một vòng lặp, kiểm tra xemfirstChildthuộc tính được xác định (phần tử có ít nhất một phần tử con) và sau đó loại bỏ nó:

const item = document.querySelector('#itemId')
while (item.firstChild) {
  item.removeChild(item.firstChild)
}

Vòng lặp kết thúc khi tất cả các con bị loại bỏ.

Đầu tiên, trong hầu hết các điểm chuẩn hiệu suất mà tôi đã kiểm tra, có vẻ là giải pháp nhanh nhất.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt: