Warum endet dieses Skript nicht in einer Endlosschleife?

8

Ich versuche einen Code zu verstehen, den ich im Internet gefunden habe. Ich verstehe in der while-Schleife nicht, warum es keine Endlosschleife ist. Wenn Sie das änderncalculator.appendChild , z console.log. B. läuft es für immer.

 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;

Grundsätzlich gibt es immer ein erstes Kind an einem nicht leeren Ort, daher ist die Bedingung immer wahr. Kann jemand erklären, warum es so nicht für immer läuft?

javascript html B. Ma
quelle
1
Das calculatorElement befindet sich außerhalb des Doms, und die while-Schleife bewegt sich einfach über alle untergeordneten Elemente von bodyto calculator, sodass sie irgendwann bodyleer ist und die Schleife endet. Der Schlüssel hier ist wohl, dass er calculatorselbst bodywährend der Schleife kein Kind ist .
Chris G

Antworten:

12

Ein Element kann nur einem anderen Element untergeordnet sein.

calculator.appendChild(document.body.firstChild);

Sobald Sie document.body.firstChildIhren Taschenrechner anschließen, löst er sich automatisch vom Körper, sodass dem Körper schließlich die Kinder ausgehen.

tkausl
quelle
Aber würde es nicht noch ein erstes Kind geben? nicht das gleiche wie früher, aber was als nächstes in der Reihe stand, wird jetzt das erste Kind. Wäre es nicht so?
Lerner
But wouldnt there be another firstChild? not the same as earlier but what was next in line will become the firstChild now..wouldnt it?Es würde, und dann läuft die Schleife wieder und nimmt auch dieses Kind, bis es keine Kinder mehr hat.
Tkausl
Im Grunde genommen entfernt das appendChild das Element aus dem Körper und fügt es dem Taschenrechner hinzu? Ich dachte, es klont es
B. Ma
Nein, es stiehlt das Original. Wenn Sie den Knoten cloneNodedamit klonen, wird er für immer wiederholt (oder besser gesagt, bis ihm der Speicher ausgeht).
Tkausl
1

Der Vorgang erfolgt also in drei einfachen Schritten:

  1. var calculator = document.createElement("div");diese Linie erzeugt eine div AUSSERHALB der bodyim DOM

  2. Dann bewegt die Schleife alle Kinder von bodyin das, calculatorwas schließlich endet, es sei denn, es bodygibt unendlich viele Kinder, was nicht möglich ist.

  3. document.body.appendChild(calculator);bewegt das calculatorunterbody

Grundsätzlich gibt es also zwei Hauptentitäten, bodyund das calculatorSkript verschiebt alle untergeordneten Elemente von bodynach calculatorund dann calculatornach body.

Mit anderen Worten, das Skript konvertiert alle Kinder von bodyin das grandchildrenvon bodyund das einzige Kind von bodywird dascalculator

Ich weiß, dass ich zu viel geschrieben habe, aber ich selbst habe es nach einer Weile verstanden und andere Kommentare und Antworten gelesen. Deshalb wollte ich es nur für die Zukunft hier lassen und für alle anderen, die mehr Erklärungen brauchen, um es zu bekommen. LOL

Lerner
quelle