Tại sao tập lệnh này không kết thúc trong vòng lặp vô hạn?

Tôi đang cố gắng để hiểu một mã tôi tìm thấy trên internet. Tôi không hiểu trong vòng lặp while, tại sao nó không phải là vòng lặp vô hạn. Nếu thay đổi calculator.appendChildtrong nó để ví dụ như console.lognó chạy mãi mãi.

 window.location.hash = 1;
 var calculator = document.createElement("div");
 calculator.id = "height-calculator";
 while (document.body.firstChild) {
    calculator.appendChild(document.body.firstChild);
 }
 document.body.appendChild(calculator);
 document.title = calculator.clientHeight;

Về cơ bản luôn có một đứa trẻ đầu tiên trong một trang web không trống, vì vậy điều kiện luôn luôn đúng. Ai đó có thể giải thích tại sao cách này không chạy mãi mãi?

javascript html

— B. Ma
nguồn

các calculatoryếu tố nằm ngoài dom, và trong khi vòng lặp chỉ đơn giản là di chuyển qua tất cả trẻ em của bodyđể calculator, vì vậy tại một số điểm, bodysẽ được bỏ trống và vòng lặp kết thúc. Chìa khóa ở đây tôi đoán là calculatorbản thân nó không phải là con của bodyvòng lặp.

— Chris G

Câu trả lời:

Một phần tử chỉ có thể là con của một phần tử khác.

calculator.appendChild(document.body.firstChild);

Ngay khi bạn gắn document.body.firstChildvào máy tính, nó sẽ tự động tách ra khỏi cơ thể, do đó cơ thể cuối cùng sẽ hết trẻ em.

— tkausl
nguồn

Nhưng sẽ không có FirstChild nữa chứ? không giống như trước đây nhưng những gì tiếp theo trong dòng sẽ trở thành FirstChild ngay bây giờ..có phải không?

— Học viên

But wouldnt there be another firstChild?  not the same as earlier but what was next in line will become the firstChild now..wouldnt it?

Nó sẽ, và sau đó vòng lặp chạy lại và đưa đứa trẻ này nữa, cho đến khi nó không còn con nữa.

— tkausl

Vì vậy, về cơ bản appendChild sẽ loại bỏ phần tử khỏi phần thân và thêm nó vào máy tính? Tôi nghĩ rằng nó nhân bản nó

— B. Ma

Không, nó ăn cắp bản gốc. Nếu bạn sao chép nút với cloneNodenó sẽ lặp mãi mãi (hay đúng hơn, cho đến khi hết bộ nhớ).

— tkausl

Vì vậy, quá trình xảy ra trong 3 bước đơn giản:

var calculator = document.createElement("div");dòng này tạo ra một div NGOÀI của bodytrong DOM
Sau đó, vòng lặp di chuyển tất cả những đứa trẻ bodyvào calculatorđó cuối cùng kết thúc trừ khi bodycó những đứa trẻ vô hạn là điều không thể.
document.body.appendChild(calculator);di chuyển calculatordướibody

Vì vậy, về cơ bản có hai đơn vị lớn bodyvà calculator, di chuyển kịch bản tất cả các trẻ em của bodyđể calculatorvà sau đó nó di chuyển calculatorđến body.

Nói cách khác kịch bản chuyển đổi tất cả con cái của bodyvào grandchildrencủa bodyvà đứa con duy nhất của bodytrở thànhcalculator

Tôi biết tôi đã viết quá nhiều nhưng bản thân tôi đã hiểu nó sau một thời gian, đọc các bình luận và câu trả lời khác vì vậy tôi chỉ muốn để nó ở đây cho tương lai và cho bất kỳ ai khác cần giải thích thêm để có được LOL

— Người học
nguồn