Führt document.createElement weiterhin DOMContentLoaded-Ereignislistener aus?

Question

Wenn ich dieses Skript ausführen, wird die Seite kontinuierlich geladen und schließlich eingefroren. Ist das, weil jedes Mal, wenn ich ein Element erstelle, der Haupt-DOMContentLoaded Listener aufgerufen wird?

Wenn ja, wie kann ich dieses rekursive Verhalten stoppen und nur einen Knoten zu jedem vorhandenen Knoten hinzufügen?

Answer 1

Es ist, weil items bezieht sich auf eine "Live-Liste". Das bedeutet, dass Aktualisierungen des DOM in Ihrer Liste wiedergegeben werden, wenn sie mit dem ursprünglichen Selektor übereinstimmen.

Da Sie eine div anhängen und Ihr Selektor alle Elemente auswählt, wird er zur Liste hinzugefügt, wobei alle nachfolgenden Mitglieder einen Index nach oben schieben, und so wird die Iteration fortgesetzt.

Um dies zu vermeiden, erstellen Sie vor dem Iterieren eine Nicht-Live-Kopie der Sammlung.

var items = Array.from(document.getElementsByTagName("*")); 

---

Und FYI, kann die if (!(items[i].nodeType == 3)){ entfernt werden, da getElementsByTagName nie Textknoten zurück.

Wenn Sie sehr alte Versionen von IE unterstützen, möchten Sie vielleicht überprüfen, dass die .nodeType === 1, da einige dieser alten Versionen Kommentarknoten bei der Verwendung "*" enthalten.

---

Schließlich können Sie moderne Funktionen verwenden, um dies ein wenig aufzuräumen.

document.addEventListener('DOMContentLoaded',() => { 
    for (const el of [...document.getElementsByTagName("*")]) { 
     var newDiv = el.appendChild(document.createElement("div")); 

     // Work with newDiv 
    } 
}); 

Answer 2

Sie erhalten eine kontinuierlich geladen Seite, weil Sie diese haben:

var items = document.getElementsByTagName("*"); 

, die eine "live" node list zurück - eine Liste bedeutet, die als die angepassten Elemente ändern ändern kann/wird. Da Ihre Auswahl für alles ist und Sie dann neue Elemente erstellen, ändert sich die Menge der übereinstimmenden Elemente (sie wird größer). Dies wiederum bewirkt, dass sich die Länge der Knotenliste ändert, wodurch Ihre Schleife weiterläuft.

Sie sollten, wie querySelectoAll()